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";

Anatomy

How the basic component is pieced together displaying all properties with their default values.

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

export default () => (
  <BarChart
    data={[{}]}
    categories={[]}
    dataKey=""
    colors={["blue"]}
    valueFormatter={undefined}
    layout="horizontal"
    stack={false}
    relative={false}
    startEndOnly={false}
    showXAxis={true}
    showYAxis={true}
    autoMinValue={false}
    yAxisWidth="w-14"
    showTooltip={true}
    showLegend={true}
    showGridLines={true}
    showAnimation={true}
    height="h-80"
    marginTop="mt-0"
  />
);

Usage example 1

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

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 () => (
  <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
      data={chartdata}
      dataKey="name"
      categories={["Number of threatened species"]}
      colors={["blue"]}
      valueFormatter={dataFormatter}
      marginTop="mt-6"
      yAxisWidth="w-12"
    />
  </Card>
);

Usage example 2

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 = [
  {
    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 () => (
  <Card>
    <Title>Writing Contest: Entries</Title>
    <BarChart
      data={chartdata2}
      dataKey="topic"
      categories={[
        "Group A",
        "Group B",
        "Group C",
        "Group D",
        "Group E",
        "Group F",
      ]}
      colors={["blue", "teal", "amber", "rose", "indigo", "emerald"]}
      valueFormatter={dataFormatter}
      marginTop="mt-6"
      yAxisWidth="w-12"
    />
  </Card>
);

API Reference: BarChart

data
Description
The source data, in which each entry is a dictionary.
Type
Object
Default
-
Values
categoriesoptional
Description
Select the categories from your data. Used to populate the legend and toolip.
Type
array
Default
-
Values
E.g. ['Cat1', 'Cat2']
dataKeyoptional
Description
Sets the key to map the data to the axis.
Type
string
Default
Values
colorsoptional
Description
Change the default colors.
Type
array
Default
-
Values
E.g. ['blue', 'indigo']
valueFormatteroptional
Description
Controls the text formatting for the y-axis values.
Type
function
Default
Values
layoutoptional
Description
Controls the orientation (vertical, horizontal)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
showXAxisoptional
Description
Controls the visibility of the horizontal axis.
Type
boolean
Default
true
Values
true, false
showYAxisoptional
Description
Controls the visibility of the horizontal axis.
Type
boolean
Default
true
Values
true, false
autoMinValueoptional
Description
Adjusts the minimum value in relation to the magnitude of the data.
Type
boolean
Default
true
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
yAxisWidthoptional
Description
Controls width of the vertical axis.
Type
number
Default
-
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
showAnimationoptional
Description
Sets an animation to the chart when it is loaded.
Type
boolean
Default
true
Values
true, false
heightoptional
Description
Defines height of the chart container.
Type
string
Default
h-80
marginTopoptional
Description
Controls the top margin.
Type
string
Default
mt-0