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

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
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 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
showAnimationoptional
Description
Sets an animation to the chart when it is loaded.
Type
boolean
Default
true
Values
true, false
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
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
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