Components

Bar Chart

Bar charts compare numerical values and use the length of each bar to represent the value of each variable.

Import BarChart

Tremor exports one component to create a bar chart.

import { BarChart } from "@tremor/react";

Usage example

The example below shows a chart composition combining a Card with Title, Subtitle, Card and BarChart components. Note: For the height, a number value has to be set (e.g, h-72, or h-[500px]. Keep in mind that h-full won't work.)

import { Card, Title, BarChart, Subtitle } from "@tremor/react";

const chartdata = [
  {
    name: "Amphibians",
    "Number of threatened species": 2488,
  },
  {
    name: "Birds",
    "Number of threatened species": 1445,
  },
  {
    name: "Crustaceans",
    "Number of threatened species": 743,
  },
];

const dataFormatter = (number: number) => {
  return "$ " + Intl.NumberFormat("us").format(number).toString();
};

export default BarChart = () => (
  <Card>
    <Title>Number of species threatened with extinction (2021)</Title>
    <Subtitle>
      The IUCN Red List has assessed only a small share of the total known species in the world.
    </Subtitle>
    <BarChart
      className="mt-6"
      data={chartdata}
      index="name"
      categories={["Number of threatened species"]}
      colors={["blue"]}
      valueFormatter={dataFormatter}
      yAxisWidth={48}
    />
  </Card>
);

Usage example with groups

The example below shows a chart composition combining a Card with Title, Subtitle, Card and BarChart components.

import { Card, Title, BarChart, Subtitle } from "@tremor/react";

const chartdata2 = [
  {
    name: "Topic 1",
    "Group A": 890,
    "Group B": 338,
    "Group C": 538,
    "Group D": 396,
    "Group E": 138,
    "Group F": 436,
  },
  {
    name: "Topic 2",
    "Group A": 289,
    "Group B": 233,
    "Group C": 253,
    "Group D": 333,
    "Group E": 133,
    "Group F": 533,
  },
];

const dataFormatter = (number: number) => {
  return "$ " + Intl.NumberFormat("us").format(number).toString();
};

export default BarChart = () => (
  <Card>
    <Title>Writing Contest: Entries</Title>
    <BarChart
      className="mt-6"
      data={chartdata2}
      index="name"
      categories={["Group A", "Group B", "Group C", "Group D", "Group E", "Group F"]}
      colors={["blue", "teal", "amber", "rose", "indigo", "emerald"]}
      valueFormatter={dataFormatter}
      yAxisWidth={48}
    />
  </Card>
);

Usage example with click event

The example below shows an interacive chart using the onValueChange prop.

null

import { Card, Title, BarChart } from "@tremor/react";
import React from "react";

const chartdata3 = [
  {
    date: "Jan 23",
    "2022": 45,
    "2023": 78,
  },
  {
    date: "Feb 23",
    "2022": 52,
    "2023": 71,
  },
  {
    date: "Mar 23",
    "2022": 48,
    "2023": 80,
  },
  {
    date: "Apr 23",
    "2022": 61,
    "2023": 65,
  },
  {
    date: "May 23",
    "2022": 55,
    "2023": 58,
  },
  {
    date: "Jun 23",
    "2022": 67,
    "2023": 62,
  },
  {
    date: "Jul 23",
    "2022": 60,
    "2023": 54,
  },
  {
    date: "Aug 23",
    "2022": 72,
    "2023": 49,
  },
  {
    date: "Sep 23",
    "2022": 65,
    "2023": 52,
  },
  {
    date: "Oct 23",
    "2022": 68,
    "2023": null,
  },
  {
    date: "Nov 23",
    "2022": 74,
    "2023": null,
  },
  {
    date: "Dec 23",
    "2022": 71,
    "2023": null,
  },
];

export const BarChartExample3 = () => {
  const [value, setValue] = React.useState(null);
  return (
    <>
      <Card>
        <Title>Closed Pull Requests</Title>
        <BarChart
          className="mt-6"
          data={chartdata3}
          index="date"
          categories={["2022", "2023"]}
          colors={["neutral", "indigo"]}
          yAxisWidth={30}
          onValueChange={(v) => setValue(v)}
        />
      </Card>
      <pre>{JSON.stringify(value)}</pre>
    </>
  );
};

Theming

Bar Chart

Chart Tooltip

API Reference: BarChart

client component