Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chart examples · Area

An area chart with icons for React

A stacked area chart whose legend and tooltip show an icon for each series.

Framework
UI library

Use icons when color alone shouldn't tell the series apart. Each series in the chart config has an icon, which the legend draws beside its label in place of the color swatch.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How do the icons get into the legend?

Set icon on the config entry. Desktop uses TrendingDownIcon and mobile uses TrendingUpIcon, beside the labels Desktop and Mobile. ChartLegendContent renders that component in place of the color swatch, at size-3.

Do the icons use the series color?

No. Legend icons paint with text-muted-foreground. The series color stays on the area: fill and stroke are var(--color-desktop) and var(--color-mobile), from var(--chart-1) and var(--chart-2) in config.

Does the tooltip show the icons too?

Yes. ChartTooltipContent draws the same icon on each row, so the color indicator is skipped for these series. This demo still sets indicator="line", which applies when an entry has no icon. cursor={false} turns the hover cursor off.

How are the areas stacked?

Both Area components set stackId="a". Mobile is first, on the baseline. Desktop is second, on top. Both use type="natural" and fillOpacity={0.4}.

How do I show the color swatch again?

Pass hideIcon to ChartLegendContent. It skips the icon and draws the series color as a swatch. The tooltip still uses icon unless you remove it from config. The label stays either way.

How are the months labeled?

XAxis uses dataKey="month" and tickFormatter={formatMonth}, which keeps value.slice(0, 3). CartesianGrid sets vertical={false}. AreaChart sets accessibilityLayer, and ChartContainer keeps the default 16:9 box inside max-w-xl.

All 70 chart examples