Visualizations

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

Usage example with groups

The example below shows a chart with a group composition.

Writing Contest: Entries

Usage example with click event

The example below shows an interacive chart using the onValueChange prop.

Closed Pull Requests

null

Usage example with custom tooltip

The example below shows a custom tooltip using customTooltip prop.

Average BPM

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.

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)

API Reference: BarChart

client component
data
Required
any[]
The source data, in which each entry is a dictionary.
categories
Required
string[]
Select the categories from your data. Used to populate the legend and toolip.
index
Required
string
Sets the key to map the data to the axis.
colors
(Color | string)[]
Change the default colors. When using Typescript, import the Color type provided by Tremor.
valueFormatter
ValueFormatter
Controls the text formatting for the y-axis values. When using Typescript, import the ValueFormatter type provided by Tremor.
layout
string

Default: horizontal

Controls stacking direction of the bars.
stack
boolean

Default: false

Controls the bars behavior to be stacked or placed along each other.
relative
boolean

Default: false

Controls the numeric axis values to be displayed relatively.
startEndOnly
boolean

Default: false

Show only the first and last elements in the x-axis. Great for smaller charts or sparklines.
showAnimation
boolean

Default: false

Sets an animation to the chart when it is loaded.
showXAxis
boolean

Default: true

Controls the visibility of the X axis.
showYAxis
boolean

Default: true

Controls the visibility of the Y axis.
yAxisWidth
number

Default: 56

Controls the width of the vertical axis.
intervalType
intervalType

Default: equidistantPreserveStart

Controls the interval logic of the X axis and how ticks and labels are placed.
rotateLabelX
{ angle: number; verticalShift?: number; xAxisHeight?: number;}
Rotating the labels of the x-axis.
animationDuration
number

Default: 900

The animation duration in ms.
showTooltip
boolean

Default: true

Controls the visibility of the tooltip.
customTooltip
React.ComponentType

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"
showLegend
boolean

Default: true

Controls the visibility of the legend.
showGridLines
boolean

Default: true

Controls the visibility of the gridlines within the plotted area.
autoMinValue
boolean

Default: false

Adjusts the minimum value in relation to the magnitude of the data.
minValue
number
Sets the minimum value of the shown chart data.
maxValue
number
Sets the maximum value of the shown chart data.
allowDecimals
boolean

Default: true

Controls if the ticks of a numeric axis are displayed as decimals or not.
noDataText
string

Default: No Data

The displayed text when the data is empty.
onValueChange
(value: EventProps) => void
Callback function for when the value of the component changes.
enableLegendSlider
boolean

Default: false

Adds a slider functionality to the legend instead of wrapping the legend items.
tickGap
number

Default: 5

Sets the minimum gap between two adjacent labels.
barCategoryGap
Percentage | number

Default: "10%"

The gap between two bar categories, which can be a percent value or a fixed value.
xAxisLabel
string
Add a label to the x-axis.
yAxisLabel
string
Add a label to the x-axis.

Theming

Bar Chart

Gridline color
colorstremor-border
X and Y Axis labels color
colorstremor-content-DEFAULT
X and Y Axis labels size
fontSizetremor-label
x/yAxis Label color
colorstremor-content-emphasis
x/yAxis Label size
fontSizetremor-DEFAULT
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
Chevron Color Slider
colorstext-tremor-content
Chevron Color Slider (hover)
colorstext-tremor-content-emphasis
Chevron Color Slider Background (hover)
colorsbg-tremor-background-subtle
Padding = { left: number; right: number; };

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