Chart

Charts

Shared primitives for building charts with Recharts.

The Chart entry is the foundation of the chart suite. It provides the shell, tooltip, and legend primitives that every chart in Shelf composes, so tooltips and legends stay consistent across your dashboard.

npx shadcn@latest add chart

Composition

Compose ChartContainer with a raw Recharts chart, a ChartTooltip, and a ChartLegend.

Preview

Live

Tasks completed

tsx

1const data = [
2  { name: "Mon", value: 18 },
3  { name: "Tue", value: 32 },
4  { name: "Wed", value: 27 },
5]
6
7<ChartContainer data={data}>
8  <div style={{ height: 220 }}>
9    <ResponsiveContainer width="100%" height="100%">
10      <BarChart data={data}>
11        <CartesianGrid stroke="var(--color-border)" vertical={false} />
12        <XAxis dataKey="name" tickLine={false} axisLine={false} fontSize={12} />
13        <YAxis tickLine={false} axisLine={false} fontSize={12} />
14        <ChartTooltip />
15        <Bar dataKey="value" fill="var(--color-chart-1)" radius={[6, 6, 0, 0]} />
16      </BarChart>
17    </ResponsiveContainer>
18  </div>
19  <ChartLegend
20    className="mt-3"
21    items={[{ name: "Tasks completed", color: "var(--color-chart-1)" }]}
22  />
23</ChartContainer>

Tooltip & legend

ChartTooltip renders the shared styled tooltip and ChartLegend renders a lightweight dot legend.

Preview

Live

Organic

Paid

Hover a chart to see the shared tooltip in action.

tsx

1<ChartTooltip />
2
3<ChartLegend
4  items={[
5    { name: "Organic", color: "var(--color-chart-1)" },
6    { name: "Paid", color: "var(--color-chart-2)" },
7  ]}
8/>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
data	unknown[]	The dataset passed to the chart, used for sizing and future CSS-var mapping.
className	string	Extra classes merged onto the chart shell.
children	React.ReactNode	The chart elements, typically a ResponsiveContainer wrapper plus a legend.