Bar Chart - Interactive
Showing total visitors for the last 3 months
Introducing Charts. A collection of chart components that you can copy and paste into your apps.
Charts are designed to look great out of the box. They work well with the other components and are fully customizable to fit your project.
Component
We use Recharts under the hood.
We designed the chart
component with composition in mind. You build your charts using Recharts components and only bring in custom components, such as ChartTootlip
, when and where you need it.
We do not wrap Recharts. This means you're not locked into an abstraction. When a new Recharts version is released, you can follow the official upgrade path to upgrade your charts.
The components are yours.
Installation
Note: If you are trying to use charts with React 19 or the Next.js 15, you will need the recharts@alpha release currently.
Run the following command to install chart.tsx
Your First Chart
Let's build your first chart. We'll build a bar chart, add a grid, axis, tooltip and legend.
Start by defining your data
The following data represents the number of desktop and mobile users for each month.
Note: Your data can be in any shape. You are not limited to the shape of the data below. Use the dataKey
prop to map your data to the chart.
Define your chart config
The chart config holds configuration for the chart. This is where you place human-readable strings, such as labels, icons and color tokens for theming.
Build your chart
You can now build your chart using Recharts components.
Important: Remember to set a min-h-[VALUE]
on the ChartContainer
component. This is required for the chart be responsive.
Component chart-bar-demo
not found in registry.
Add a Grid
Let's add a grid to the chart.
Import the CartesianGrid
component.
Add the CartesianGrid
component to your chart.
Component chart-bar-demo-grid
not found in registry.
Add an Axis
To add an x-axis to the chart, we'll use the XAxis
component.
Import the XAxis
component.
Add the XAxis
component to your chart.
Component chart-bar-demo-axis
not found in registry.
Add Tooltip
So far we've only used components from Recharts. They look great out of the box thanks to some customization in the chart
component.
To add a tooltip, we'll use the custom ChartTooltip
and ChartTooltipContent
components from chart
.
Import the ChartTooltip
and ChartTooltipContent
components.
Add the components to your chart.
Component chart-bar-demo-tooltip
not found in registry.
Hover to see the tooltips. Easy, right? Two components, and we've got a beautiful tooltip.
Add Legend
We'll do the same for the legend. We'll use the ChartLegend
and ChartLegendContent
components from chart
.
Import the ChartLegend
and ChartLegendContent
components.
Add the components to your chart.
Component chart-bar-demo-legend
not found in registry.
Done. You've built your first chart! What's next?
Chart Config
The chart config is where you define the labels, icons and colors for a chart.
It is intentionally decoupled from chart data.
This allows you to share config and color tokens between charts. It can also works independently for cases where your data or color tokens live remotely or in a different format.
Theming
Charts has built-in support for theming. You can use css variables (recommended) or color values in any color format, such as hex, hsl or oklch.
CSS Variables
Define your colors in your css file
Add the color to your chartConfig
Note: If you are using charts with React 19 or the Next.js 15, see the note here.
We're wrapping the value in hsl()
here because we define the colors without color space function.
This is not required. You can use full color values, such as hex, hsl or oklch.
hex, hsl or oklch
You can also define your colors directly in the chart config. Use the color format you prefer.
Using Colors
To use the theme colors in your chart, reference the colors using the format var(--color-KEY)
.
Components
Chart Data
Tailwind
Tooltip
A chart tooltip contains a label, name, indicator and value. You can use a combination of these to customize your tooltip.
Component chart-tooltip-demo
not found in registry.
You can turn on/off any of these using the hideLabel
, hideIndicator
props and customize the indicator style using the indicator
prop.
Use labelKey
and nameKey
to use a custom key for the tooltip label and name.
Chart comes with the <ChartTooltip>
and <ChartTooltipContent>
components. You can use these two components to add custom tooltips to your chart.
Props
Use the following props to customize the tooltip.
Prop | Type | Description |
---|---|---|
labelKey | string | The config or data key to use for the label. |
nameKey | string | The config or data key to use for the name. |
indicator | dot line or dashed | The indicator style for the tooltip. |
hideLabel | boolean | Whether to hide the label. |
hideIndicator | boolean | Whether to hide the indicator. |
Colors
Colors are automatically referenced from the chart config.
Custom
To use a custom key for tooltip label and names, use the labelKey
and nameKey
props.
This will use Total Visitors
for label and Chrome
and Safari
for the tooltip names.
Legend
You can use the custom <ChartLegend>
and <ChartLegendContent>
components to add a legend to your chart.
Colors
Colors are automatically referenced from the chart config.
Custom
To use a custom key for legend names, use the nameKey
prop.
This will use Chrome
and Safari
for the legend names.
Accessibility
You can turn on the accessibilityLayer
prop to add an accessible layer to your chart.
This prop adds keyboard access and screen reader support to your charts.