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 2

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 = [
  {
    topic: "Topic 1",
    "Group A": 890,
    "Group B": 338,
    "Group C": 538,
    "Group D": 396,
    "Group E": 138,
    "Group F": 436,
  },
  {
    topic: "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>
);

API Reference: BarChart

client component