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
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
Element | Theme Token |
---|---|
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
Element | Theme Token |
---|---|
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.