Chart

When to UseCopy Anchor Link

• as a line chart, for a trend over time, such as revenue by month against last year
• as a stacked area chart, for the parts of a total over time, such as billable and internal hours
• as a grouped bar chart, to compare two series category by category
• as a donut chart, for the shares of one total, such as revenue by client

When Not to UseCopy Anchor Link

• for exact values that users look up or compare row by row (use a Table)
• for one figure, like “Outstanding” (use a Card with the figure as its title)
• for how far one task has come (use the Progress component)
• for more than five series (use a Table)

AnatomyCopy Anchor Link

Recharts renders the chart type, the series, the axes, and the grid. Summit provides the container, the tooltip, and the legend.

ChartCopy Anchor Link

TooltipCopy Anchor Link

The tooltip appears next to the point that is under the pointer or that users reached with the arrow keys.

BehaviorCopy Anchor Link

ChartContainer wraps the chart in Recharts’ ResponsiveContainer and declares the color variables.

SizeCopy Anchor Link

By default, ChartContainer is as wide as its container and has a ratio of 16 to 9. To replace the ratio, pass a class. For example, aspect-auto h-64 w-full sets a fixed height, and the donut sets aspect-square. Recharts measures the container and redraws the chart when its size changes. Until Recharts has measured the container, as on the server, the chart is drawn at initialDimension, which is 320 by 200px by default.

ColorsCopy Anchor Link

ChartContainer declares a variable for each key of config that has a color: for example, current becomes --color-current. Use the variable in the fill or the stroke of a series. Use chart-1 for the first series, chart-2 for the second, and continue in order. See Color for the chart colors.

To set a light and a dark value, pass theme in place of color. The chart colors already change with the theme, so color: 'var(--chart-1)' doesn’t need theme.

Tooltip ContentCopy Anchor Link

The tooltip shows the category, and then one row for each series: an indicator, the label of the series from config, and the value. A number is formatted with toLocaleString(), so 11200 is shown as “11,200” in English.

To change the mark next to each series, set indicator.

The previews set cursor={false}, which removes the line or the band that Recharts shows at the active point.

LegendCopy Anchor Link

ChartLegendContent shows a swatch and the label of each series. If a series has no label, its swatch has no name.

By default, Recharts sorts the legend by the name of each series, which is its dataKey unless the series sets name. To keep the order in which the series are written, set itemSorter={null} on ChartLegend, as the previews do.

ContentCopy Anchor Link

AccessibilityCopy Anchor Link

Recharts renders a chart as one svg. Its accessibilityLayer, which is on by default from Recharts 3, adds that svg to the tab order and allows users to move the tooltip with the arrow keys.

KeyboardCopy Anchor Link

When users press Tab again, focus moves out of the chart, and the tooltip closes. In a donut chart, no key opens the tooltip.

According to the Recharts documentation, a screen reader has to pass these keys through to the chart: JAWS and NVDA do so for role="application", and VoiceOver does so when Quick Nav is off.

RequirementsCopy Anchor Link

Two series differ by color alone, so users who can’t tell the two colors apart can’t tell the series apart. If their lines cross, add a second sign to one of them, such as strokeDasharray="4 4" on last year’s line.

InstallationCopy Anchor Link

npx shadcn@latest add @summit/chart

UsageCopy Anchor Link

Recharts renders the chart, so import the chart type, the series, the axes, and the grid from recharts. In config, set the name and the color of each series.

import {
    ChartContainer,
    ChartLegend,
    ChartLegendContent,
    ChartTooltip,
    ChartTooltipContent,
} from '@/components/ui/chart';
import type { ChartConfig } from '@/components/ui/chart';
import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts';

const revenue = [
    { month: 'Sep', current: 16373, previous: 13100 },
    { month: 'Oct', current: 18420, previous: 14250 },
];

const config = {
    current: { label: '2026', color: 'var(--chart-1)' },
    previous: { label: '2025', color: 'var(--chart-2)' },
} satisfies ChartConfig;

<ChartContainer config={config}>
    <BarChart data={revenue} title="Revenue by month, 2025 and 2026">
        <CartesianGrid vertical={false} />
        <XAxis dataKey="month" tickLine={false} axisLine={false} tickMargin={8} />
        <YAxis tickLine={false} axisLine={false} tickMargin={8} width={48} />
        <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
        <Bar dataKey="previous" fill="var(--color-previous)" radius={4} isAnimationActive={false} />
        <Bar dataKey="current" fill="var(--color-current)" radius={4} isAnimationActive={false} />
        <ChartLegend itemSorter={null} content={<ChartLegendContent />} />
    </BarChart>
</ChartContainer>;

Set the SizeCopy Anchor Link

To replace the 16 to 9 ratio, pass a className to ChartContainer.

<ChartContainer config={config} className="aspect-auto h-64 w-full">
    <BarChart data={revenue} />
</ChartContainer>

Format the AxisCopy Anchor Link

To format the ticks of a Recharts axis, pass a function that returns the text of a tick to tickFormatter.

<YAxis tickFormatter={(value: number) => `$${value / 1000}k`} />

Change the TooltipCopy Anchor Link

To change the tooltip, set indicator, hideLabel, or hideIndicator on ChartTooltipContent.

<ChartTooltip cursor={false} content={<ChartTooltipContent indicator="line" hideLabel />} />

Color Each Slice of a DonutCopy Anchor Link

Add a key to config for each slice, set the fill of each row to its variable, and pass the field that contains the key as nameKey.

import { Pie, PieChart } from 'recharts';

const clients = [
    { client: 'brume', revenue: 7703, fill: 'var(--color-brume)' },
    { client: 'kite', revenue: 5400, fill: 'var(--color-kite)' },
];

const config = {
    brume: { label: 'Atelier Brume', color: 'var(--chart-1)' },
    kite: { label: 'Paper Kite Films', color: 'var(--chart-2)' },
} satisfies ChartConfig;

<ChartContainer config={config} className="mx-auto aspect-square max-w-sm">
    <PieChart>
        <ChartTooltip cursor={false} content={<ChartTooltipContent nameKey="client" />} />
        <Pie data={clients} dataKey="revenue" nameKey="client" innerRadius="58%" outerRadius="80%" />
        <ChartLegend itemSorter={null} content={<ChartLegendContent nameKey="client" />} />
    </PieChart>
</ChartContainer>;

API ReferenceCopy Anchor Link

ChartContainer renders ChartStyle, so you don’t need to add ChartStyle to a chart.

ChartContainerCopy Anchor Link

Other props are passed to the div.

ChartConfigCopy Anchor Link

A key of config is the dataKey of a series, or the value of the field that nameKey names.

ChartTooltipContentCopy Anchor Link

See the Recharts Tooltip documentation for cursor, defaultIndex, and trigger on ChartTooltip.

ChartLegendContentCopy Anchor Link

See the Recharts Legend documentation for itemSorter on ChartLegend.