1. Components
  2. Bar Chart

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.)

Number of species threatened with extinction (2021)

The IUCN Red List has assessed only a small share of the total known species in the world.

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.

Writing Contest: Entries

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.

Closed Pull Requests

null
Returned upon onValueChange
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

Gridline color
colorstremor-content-subtle
X and Y Axis labels color
colorstremor-content-DEFAULT
X and Y Axis labels size
fontSizetremor-label
Text color legend
colorstremor-content-DEFAULT
Text color legend (hover)
colorstremor-content-emphasis
Font size legend
colorstremor-default
Background color legend (hover)
colorstremor-background-subtle

Chart Tooltip

Border color
colorstremor-border-DEFAULT
Text color head and numbers
colorstremor-content-emphasis
Color ring around bulletpoint
colorstremor-background-DEFAULT
Background color
colorstremor-background-default
Text color label
colorstremor-content-DEFAULT
Shadow
boxShadowtremor-dropdown
Roundness
borderRadiustremor-default
Font size head and numbers
fontSizetremor-default

API Reference: BarChart

client component

data
Description
The source data, in which each entry is a dictionary.
Type
any[]
Default
Values
categories
Description
Select the categories from your data. Used to populate the legend and toolip.
Type
string[]
Default
Values
E.g. ['Cat1', 'Cat2']
index
Description
Sets the key to map the data to the axis.
Type
string
Default
Values
colorsoptional
Description
Change the default colors. When using Typescript, import the Color type provided by Tremor.
Type
Color[]
Default
Values
E.g. ['blue', 'indigo'].
valueFormatteroptional
Description
Controls the text formatting for the y-axis values. When using Typescript, import the ValueFormatter type provided by Tremor.
Type
ValueFormatter
Default
Values
layoutoptional
Description
Controls stacking direction of the bars.
Type
string
Default
horizontal
Values
horizontal, vertical
stackoptional
Description
Controls the bars behavior to be stacked or placed along each other.
Type
boolean
Default
false
Values
true, false
relativeoptional
Description
Controls the numeric axis values to be displayed relatively.
Type
boolean
Default
false
Values
true, false
startEndOnlyoptional
Description
Show only the first and last elements in the x-axis. Great for smaller charts or sparklines.
Type
boolean
Default
false
Values
true, false
showAnimationoptional
Description
Sets an animation to the chart when it is loaded.
Type
boolean
Default
false
Values
true, false
showXAxisoptional
Description
Controls the visibility of the X axis.
Type
boolean
Default
true
Values
true, false
showYAxisoptional
Description
Controls the visibility of the Y axis.
Type
boolean
Default
true
Values
true, false
yAxisWidthoptional
Description
Controls width of the vertical axis.
Type
number
Default
56
Values
animationDurationoptional
Description
The animation duration in ms.
Type
number
Default
900
Values
showTooltipoptional
Description
Controls the visibility of the tooltip.
Type
boolean
Default
true
Values
true, false
showLegendoptional
Description
Controls the visibility of the legend.
Type
boolean
Default
true
Values
true, false
showGridLinesoptional
Description
Controls the visibility of the gridlines within the plotted area.
Type
boolean
Default
true
Values
true, false
autoMinValueoptional
Description
Adjusts the minimum value in relation to the magnitude of the data.
Type
boolean
Default
false
Values
true, false
minValueoptional
Description
Sets the minimum value of the shown chart data.
Type
number
Default
Values
maxValueoptional
Description
Sets the maximum value of the shown chart data.
Type
number
Default
Values
allowDecimalsoptional
Description
Controls if the ticks of a numeric axis are displayed as decimals or not.
Type
boolean
Default
true
Values
true, false
noDataTextoptional
Description
The displayed text when the data is empty.
Type
string
Default
No Data
Values
onValueChangeoptional
Description
Callback function for when the value of the component changes.
Type
(value: T) => void
Default
Values

Need help? You can also ask the community on GitHub Discussions or Slack.