Chart
Beautiful charts. Built using Recharts. Copy and paste into your apps.
Note: We're working on upgrading to Recharts v3. In the meantime, if you'd like to start testing v3, see the code in the comment here. We'll have an official release soon.
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 Chart.Tooltip, when and where you need it.
module MyChart = {
@react.component
let make = () => {
<Chart>
<Chart.Recharts.BarChart data={data}>
<Chart.Recharts.Bar dataKey="value" />
<Chart.Tooltip content={<Chart.TooltipContent />} />
</Chart.Recharts.BarChart>
</Chart>
}
}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
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.
let chartData = [
{ DataRow.month: "January", desktop: 186, mobile: 80 },
{ month: "February", desktop: 305, mobile: 200 },
{ month: "March", desktop: 237, mobile: 120 },
{ month: "April", desktop: 73, mobile: 190 },
{ month: "May", desktop: 209, mobile: 130 },
{ month: "June", desktop: 214, mobile: 140 },
]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.
let chartConfig = dict{
"desktop": {
Chart.label: "Desktop",
color: "#2563eb",
},
"mobile": {
label: "Mobile",
color: "#60a5fa",
},
}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 to be responsive.
Add a Grid
Let's add a grid to the chart.
Add the CartesianGrid component to your chart.
<Chart config={chartConfig} className="min-h-[200px] w-full">
<Chart.Recharts.BarChart accessibilityLayer=true data={chartData}>
<Chart.Recharts.CartesianGrid vertical=NoLine />
<Chart.Recharts.Bar dataKey="desktop" fill="var(--color-desktop)" radius=4.0 />
<Chart.Recharts.Bar dataKey="mobile" fill="var(--color-mobile)" radius=4.0 />
</Chart.Recharts.BarChart>
</Chart>Add an Axis
To add an x-axis to the chart, we'll use the XAxis component.
Add the XAxis component to your chart.
<Chart config={chartConfig} className="h-[200px] w-full">
<Chart.Recharts.BarChart accessibilityLayer=true data={chartData}>
<CartesianGrid vertical=NoLine />
<Chart.Recharts.XAxis
dataKey="month"
tickLine={false}
tickMargin={10}
axisLine={false}
tickFormatter={(value) => value.slice(0, 3)}
/>
<Chart.Recharts.Bar dataKey="desktop" fill="var(--color-desktop)" radius=4.0 />
<Chart.Recharts.Bar dataKey="mobile" fill="var(--color-mobile)" radius=4.0 />
</Chart.Recharts.BarChart>
</Chart>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 Chart.Tooltip and Chart.TooltipContent components from chart.
Import the Chart.Tooltip and Chart.TooltipContent components.
Add the components to your chart.
<Chart config={chartConfig} className="h-[200px] w-full">
<Chart.Recharts.BarChart accessibilityLayer=true data={chartData}>
<Chart.Recharts.CartesianGrid vertical={NoLine} />
<Chart.Recharts.XAxis
dataKey="month"
tickLine={false}
tickMargin={10.0}
axisLine={false}
tickFormatter={(value) => value->String.slice(~start=0, ~end=3)}
/>
<Chart.Tooltip content={<Chart.TooltipContent />} />
<Chart.Recharts.Bar dataKey="desktop" fill="var(--color-desktop)" radius={4.0} />
<Chart.Recharts.Bar dataKey="mobile" fill="var(--color-mobile)" radius={4.0} />
</Chart.Recharts.BarChart>
</Chart>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 Chart.Legend and Chart.LegendContent components from chart.
Import the Chart.Legend and Chart.LegendContent components.
Add the components to your chart.
<Chart config={chartConfig} className="h-[200px] w-full">
<Chart.Recharts.BarChart accessibilityLayer=true data={chartData}>
<Chart.Recharts.CartesianGrid vertical={NoLine} />
<Chart.Recharts.XAxis
dataKey="month"
tickLine={false}
tickMargin={10.0}
axisLine={false}
tickFormatter={(value) => value->String.slice(~start=0, ~end=3)}
/>
<Chart.Tooltip content={<Chart.TooltipContent />} />
<Chart.Legend content={<Chart.LegendContent />} />
<Chart.Recharts.Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
<Chart.Recharts.Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
</Chart.Recharts.BarChart>
</Chart>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 work independently for cases where your data or color tokens live remotely or in a different format.
let chartConfig = dict{
"desktop": {
Chart.label: "Desktop",
icon: Monitor,
// A color like 'hsl(220, 98%, 61%)' or 'var(--color-name)'
color: "#2563eb",
// OR a theme object with 'light' and 'dark' keys
theme: {
light: "#2563eb",
dark: "#dc2626",
},
},
}Theming
Charts have 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
@layer base {
:root {
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
}
.dark: {
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
}
}Add the color to your chartConfig
let chartConfig = dict{
"desktop": {
Chart.label: "Desktop",
color: "var(--chart-1)",
},
"mobile": {
label: "Mobile",
color: "var(--chart-2)",
},
}hex, hsl or oklch
You can also define your colors directly in the chart config. Use the color format you prefer.
let chartConfig = dict{
"desktop": {
Chart.label: "Desktop",
color: "#2563eb",
},
"mobile": {
label: "Mobile",
color: "hsl(220, 98%, 61%)",
},
"tablet": {
label: "Tablet",
color: "oklch(0.5 0.2 240)",
},
"laptop": {
label: "Laptop",
color: "var(--chart-2)",
},
}Using Colors
To use the theme colors in your chart, reference the colors using the format var(--color-KEY).
Components
<Chart.Recharts.Bar dataKey="desktop" fill="var(--color-desktop)" />Chart Data
let chartData = [
{ Data.browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
{ browser: "safari", visitors: 200, fill: "var(--color-safari)" },
]Tailwind
<LabelList className="fill-[--color-desktop]" />Tooltip
A chart tooltip contains a label, name, indicator and value. You can use a combination of these to customize your tooltip.
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 <Chart.Tooltip> and <Chart.TooltipContent> components. You can use these two components to add custom tooltips to your chart.
<Chart.Tooltip content={<Chart.TooltipContent />} />Props
Use the following props to customize the tooltip.
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.
const chartData = [
{ Data.browser: "chrome", visitors: 187, fill: "var(--color-chrome)" },
{ browser: "safari", visitors: 200, fill: "var(--color-safari)" },
]
let chartConfig = dict{
"visitors": {
Chart.label: "Total Visitors",
},
"chrome": {
label: "Chrome",
color: "hsl(var(--chart-1))",
},
"safari": {
label: "Safari",
color: "hsl(var(--chart-2))",
},
}<Chart.Tooltip
content={<Chart.TooltipContent labelKey="visitors" nameKey="browser" />}
/>This will use Total Visitors for label and Chrome and Safari for the tooltip names.
Legend
You can use the custom <Chart.Legend> and <Chart.LegendContent> components to add a legend to your chart.
<Char.tLegend content={<Chart.LegendContent />} />Colors
Colors are automatically referenced from the chart config.
Custom
To use a custom key for legend names, use the nameKey prop.
let chartData = [
{ Data.browser: "chrome", visitors: 187, fill: "var(--color-chrome)" },
{ browser: "safari", visitors: 200, fill: "var(--color-safari)" },
]
let chartConfig = dict{
"chrome": {
Chart.label: "Chrome",
color: "hsl(var(--chart-1))",
},
safari: {
label: "Safari",
color: "hsl(var(--chart-2))",
},
}<Chart.Legend content={<Chart.LegendContent nameKey="browser" />} />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.
<LineChart accessibilityLayer=true />