Visualizations
Bar Chart
Bar charts compare numerical values and use the length of each bar to represent the value of each variable.
import { BarChart } 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, }, { name: 'Ferns', 'Number of threatened species': 281, }, { name: 'Arachnids', 'Number of threatened species': 251, }, { name: 'Corals', 'Number of threatened species': 232, }, { name: 'Algae', 'Number of threatened species': 98, },];
const dataFormatter = (number: number) => Intl.NumberFormat('us').format(number).toString();
export const BarChartHero = () => ( <BarChart data={chartdata} index="name" categories={['Number of threatened species']} colors={['blue']} valueFormatter={dataFormatter} yAxisWidth={48} onValueChange={(v) => console.log(v)} />);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 BarChart with text elements. Note: For the height, a number value has to be set (e.g. h-72. Keep in mind that h-full won't work.)
Number of species threatened with extinction (2021)
import { BarChart } 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, }, { name: 'Ferns', 'Number of threatened species': 281, }, { name: 'Arachnids', 'Number of threatened species': 251, }, { name: 'Corals', 'Number of threatened species': 232, }, { name: 'Algae', 'Number of threatened species': 98, },];
const dataFormatter = (number: number) => Intl.NumberFormat('us').format(number).toString();
export function BarChartUsageExample() { return ( <> <h3 className="text-lg font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong"> Number of species threatened with extinction (2021) </h3> <BarChart className="mt-6" data={chartdata} index="name" categories={['Number of threatened species']} colors={['blue']} valueFormatter={dataFormatter} yAxisWidth={48} /> </> );}Usage example with groups
The example below shows a chart with a group composition.
Writing Contest: Entries
import { BarChart } from '@tremor/react';
const chartdata = [ { 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, }, { name: 'Topic 3', 'Group A': 380, 'Group B': 535, 'Group C': 352, 'Group D': 718, 'Group E': 539, 'Group F': 234, }, { name: 'Topic 4', 'Group A': 90, 'Group B': 98, 'Group C': 28, 'Group D': 33, 'Group E': 61, 'Group F': 53, },];
const dataFormatter = (number: number) => Intl.NumberFormat('us').format(number).toString();
export function BarChartExampleWithGroups() { return ( <> <h3 className="text-lg font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong"> Writing Contest: Entries </h3> <BarChart className="mt-6" data={chartdata} 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} /> </> );}Usage example with click event
The example below shows an interacive chart using the onValueChange prop.
Closed Pull Requests
nullimport { BarChart, EventProps } from '@tremor/react';import { useState } from 'react';
const chartdata = [ { 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 function BarChartUsageExampleWithClickEvent() { const [value, setValue] = useState<EventProps>(null); return ( <> <h3 className="text-lg font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong"> Closed Pull Requests </h3> <BarChart className="mt-6" data={chartdata} index="date" categories={['2022', '2023']} colors={['gray', 'blue']} yAxisWidth={30} onValueChange={(v) => setValue(v)} /> <CodeBlock source={JSON.stringify(value, null, 2)} variant="empty" className="mt-8" /> </> );}Usage example with custom tooltip
The example below shows a custom tooltip using customTooltip prop.
Average BPM
import { BarChart } from '@tremor/react';
const chartdata = [ { date: 'Jan 23', Running: 167, }, { date: 'Feb 23', Running: 125, }, { date: 'Mar 23', Running: 156, }, { date: 'Apr 23', Running: 165, }, { date: 'May 23', Running: 153, }, { date: 'Jun 23', Running: 124, }, { date: 'Jul 23', Running: 164, }, { date: 'Aug 23', Running: 123, }, { date: 'Sep 23', Running: 132, },];
export function BarChartExampleWithCustomTooltip() { type CustomTooltipTypeBar = { payload: any; active: boolean | undefined; label: any; };
const customTooltip = (props: CustomTooltipTypeBar) => { const { payload, active } = props; if (!active || !payload) return null; return ( <div className="w-56 rounded-tremor-default border border-tremor-border bg-tremor-background p-2 text-tremor-default shadow-tremor-dropdown"> {payload.map((category: any, idx: number) => ( <div key={idx} className="flex flex-1 space-x-2.5"> <div className={`flex w-1 flex-col bg-${category.color}-500 rounded`} /> <div className="space-y-1"> <p className="text-tremor-content">{category.dataKey}</p> <p className="font-medium text-tremor-content-emphasis"> {category.value} bpm </p> </div> </div> ))} </div> ); }; return ( <> <h3 className="text-lg font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong"> Average BPM </h3> <BarChart className="mt-4 h-72" data={chartdata} index="date" categories={['Running']} colors={['blue']} yAxisWidth={30} customTooltip={customTooltip} /> </> );}Usage example with a custom colors
The example below shows a chart with custom colors. Note, that for the custom HEX color to work, the tailwind.config.js has to be adjusted. Learn more about custom colors in your theming section.
// NOTE: The tailwind.config.js has to be extended if you use custom HEX color// ...['[#f0652f]'].flatMap((customColor) => [// `bg-${customColor}`,// `border-${customColor}`,// `hover:bg-${customColor}`,// `hover:border-${customColor}`,// `hover:text-${customColor}`,// `fill-${customColor}`,// `ring-${customColor}`,// `stroke-${customColor}`,// `text-${customColor}`,// `ui-selected:bg-${customColor}]`,// `ui-selected:border-${customColor}]`,// `ui-selected:text-${customColor}`,// ]),
import { BarChart } from '@tremor/react';
const chartdata = [ { date: 'Jan 23', 'Distance Running': 167, 'Road Cycling': 145, 'Open Water Swimming': 135, 'Hatha Yoga': 115, 'Street Basketball': 150, }, { date: 'Feb 23', 'Distance Running': 125, 'Road Cycling': 110, 'Open Water Swimming': 155, 'Hatha Yoga': 85, 'Street Basketball': 180, }, { date: 'Mar 23', 'Distance Running': 156, 'Road Cycling': 149, 'Open Water Swimming': 145, 'Hatha Yoga': 90, 'Street Basketball': 130, }, { date: 'Apr 23', 'Distance Running': 165, 'Road Cycling': 112, 'Open Water Swimming': 125, 'Hatha Yoga': 105, 'Street Basketball': 170, }, { date: 'May 23', 'Distance Running': 153, 'Road Cycling': 138, 'Open Water Swimming': 165, 'Hatha Yoga': 100, 'Street Basketball': 110, }, { date: 'Jun 23', 'Distance Running': 124, 'Road Cycling': 145, 'Open Water Swimming': 175, 'Hatha Yoga': 75, 'Street Basketball': 140, },];
export function BarChartExampleWithCustomColor() { return ( <> <BarChart className="h-72" data={chartdata} index="date" categories={['Distance Running', 'Road Cycling', 'Open Water Swimming']} colors={['indigo-300', 'rose-200', '#ffcc33']} yAxisWidth={30} /> </> );}Usage example with x-axis and y-axis labels
The example below shows added axis labels using xAxisLabel and yAxisLabel prop.
Number of species threatened with extinction (2021)
'use client';import { BarChart } 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, }, { name: 'Ferns', 'Number of threatened species': 281, }, { name: 'Arachnids', 'Number of threatened species': 251, }, { name: 'Corals', 'Number of threatened species': 232, }, { name: 'Algae', 'Number of threatened species': 98, },];
const dataFormatter = (number: number) => Intl.NumberFormat('us').format(number).toString();
export function BarChartUsageExampleAxisLabel() { return ( <> <h3 className="text-lg font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong"> Number of species threatened with extinction (2021) </h3> <BarChart className="mt-6" data={chartdata} index="name" categories={['Number of threatened species']} colors={['blue']} valueFormatter={dataFormatter} yAxisWidth={48} xAxisLabel="Species" yAxisLabel="Count" /> </> );}API Reference: BarChart
client component- data
- The source data, in which each entry is a dictionary.
Required
any[]
- categories
- Select the categories from your data. Used to populate the legend and toolip.
Required
string[]
- index
- Sets the key to map the data to the axis.
Required
string
- colors
- Change the default colors. When using Typescript, import the Color type provided by Tremor.
(Color | string)[]
- valueFormatter
- Controls the text formatting for the y-axis values. When using Typescript, import the ValueFormatter type provided by Tremor.
ValueFormatter
- layout
- Controls stacking direction of the bars.
string
Default: horizontal
- stack
- Controls the bars behavior to be stacked or placed along each other.
boolean
Default: false
- relative
- Controls the numeric axis values to be displayed relatively.
boolean
Default: false
- startEndOnly
- Show only the first and last elements in the x-axis. Great for smaller charts or sparklines.
boolean
Default: false
- showAnimation
- Sets an animation to the chart when it is loaded.
boolean
Default: false
- showXAxis
- Controls the visibility of the X axis.
boolean
Default: true
- showYAxis
- Controls the visibility of the Y axis.
boolean
Default: true
- yAxisWidth
- Controls the width of the vertical axis.
number
Default: 56
- intervalType
- Controls the interval logic of the X axis and how ticks and labels are placed.
intervalType
Default: equidistantPreserveStart
- rotateLabelX
- Rotating the labels of the x-axis.
{ angle: number; verticalShift?: number; xAxisHeight?: number;}
- animationDuration
- The animation duration in ms.
number
Default: 900
- showTooltip
- Controls the visibility of the tooltip.
boolean
Default: true
- customTooltip
Override the default tooltip by applying custom styling and data logic. Refer to the examples of custom tooltips above for more info. Within this prop, you have access to:
- active: Indicates whether a tooltip should be displayed for a corresponding data point
- payload: E.g., use payload[0].value for the value, such as "$ 450". Both payload[0].dataKey and payload[0].name for category values, such as "Sales"
- label: For x-axis values, such as "Jan 21"
React.ComponentType
- showLegend
- Controls the visibility of the legend.
boolean
Default: true
- showGridLines
- Controls the visibility of the gridlines within the plotted area.
boolean
Default: true
- autoMinValue
- Adjusts the minimum value in relation to the magnitude of the data.
boolean
Default: false
- minValue
- Sets the minimum value of the shown chart data.
number
- maxValue
- Sets the maximum value of the shown chart data.
number
- allowDecimals
- Controls if the ticks of a numeric axis are displayed as decimals or not.
boolean
Default: true
- noDataText
- The displayed text when the data is empty.
string
Default: No Data
- onValueChange
- Callback function for when the value of the component changes.
(value: EventProps) => void
- enableLegendSlider
- Adds a slider functionality to the legend instead of wrapping the legend items.
boolean
Default: false
- tickGap
- Sets the minimum gap between two adjacent labels.
number
Default: 5
- barCategoryGap
- The gap between two bar categories, which can be a percent value or a fixed value.
Percentage | number
Default: "10%"
- xAxisLabel
- Add a label to the x-axis.
string
- yAxisLabel
- Add a label to the x-axis.
string
Theming
Bar Chart
| Element | Theme Token |
|---|---|
| Gridline color colorstremor-border | colorstremor-border |
| X and Y Axis labels color colorstremor-content-DEFAULT | colorstremor-content-DEFAULT |
| X and Y Axis labels size fontSizetremor-label | fontSizetremor-label |
| x/yAxis Label color colorstremor-content-emphasis | colorstremor-content-emphasis |
| x/yAxis Label size fontSizetremor-DEFAULT | fontSizetremor-DEFAULT |
| Text color legend colorstremor-content-DEFAULT | colorstremor-content-DEFAULT |
| Text color legend (hover) colorstremor-content-emphasis | colorstremor-content-emphasis |
| Font size legend colorstremor-default | colorstremor-default |
| Background color legend (hover) colorstremor-background-subtle | colorstremor-background-subtle |
| Chevron Color Slider colorstext-tremor-content | colorstext-tremor-content |
| Chevron Color Slider (hover) colorstext-tremor-content-emphasis | colorstext-tremor-content-emphasis |
| Chevron Color Slider Background (hover) colorsbg-tremor-background-subtle | colorsbg-tremor-background-subtle |
Padding = { left: number; right: number; }; | Padding = { left: number; right: number; }; |
Chart Tooltip
| Element | Theme Token |
|---|---|
| Border color colorstremor-border-DEFAULT | colorstremor-border-DEFAULT |
| Text color head and numbers colorstremor-content-emphasis | colorstremor-content-emphasis |
| Color ring around bulletpoint colorstremor-background-DEFAULT | colorstremor-background-DEFAULT |
| Background color colorstremor-background-default | colorstremor-background-default |
| Text color label colorstremor-content-DEFAULT | colorstremor-content-DEFAULT |
| Shadow boxShadowtremor-dropdown | boxShadowtremor-dropdown |
| Roundness borderRadiustremor-default | borderRadiustremor-default |
| Font size head and numbers fontSizetremor-default | fontSizetremor-default |