Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chart examples · Area

A step area chart for React

An area chart with step interpolation, holding each value flat until the next month.

Framework
UI library

Use step areas for values that hold until they change, like plan tiers or stock levels. type="step" keeps each month's value flat until the next one, and the tooltip shows the series' icon from the chart config.

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 I get the stair steps?

Area sets type="step". The value stays flat and then jumps at the next month. dataKey is desktop, fill and stroke are var(--color-desktop), and fillOpacity is 0.4.

Where does the Activity icon show up?

config sets icon to ActivityIcon on desktop. This file has no ChartLegend. ChartTooltipContent draws that icon in the tooltip, in place of the color dot, next to the label Desktop.

Why is the month missing from the tooltip?

ChartTooltipContent sets hideLabel, which hides the tooltip title. XAxis already shows the month. The row is the Activity icon, Desktop, and the value. cursor={false} turns the hover cursor off.

How are the ticks shortened?

XAxis uses dataKey="month" and tickFormatter={formatMonth}, which returns value.slice(0, 3). axisLine and tickLine are false, and tickMargin is 8. CartesianGrid sets vertical={false}.

Where does the area color come from?

The desktop entry in config sets color to var(--chart-1) and label to Desktop. ChartContainer writes --color-desktop, which Area reads for both fill and stroke.

Can I move across the steps with the keyboard?

Yes. AreaChart sets accessibilityLayer. The month tick and the Desktop label name each point. The margin is left: 12 and right: 12, and ChartContainer keeps the default 16:9 box inside max-w-xl.

All 70 chart examples