Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chart examples · Area

A simple area chart for React

A single-series area chart with a smooth curve and a filled area under it.

Framework
UI library

The starting point for an area chart. One series is drawn as a smooth curve over six months with the area under it filled at 40% opacity, over horizontal grid lines, and the tooltip uses a line indicator.

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 smooth curve?

Area sets type="natural", dataKey="desktop", fill="var(--color-desktop)", and stroke="var(--color-desktop)". fillOpacity={0.4} fades the area under that stroke. The color comes from config, where desktop is var(--chart-1) and the label is Desktop.

Why do the ticks say Jan?

XAxis uses dataKey="month" and tickFormatter={formatMonth}. formatMonth returns value.slice(0, 3), so January becomes Jan. axisLine and tickLine are false, and tickMargin is 8.

Why are the grid lines only horizontal?

CartesianGrid sets vertical={false}, so only the horizontal lines render. AreaChart sets accessibilityLayer and a margin of left: 12 and right: 12.

What does the tooltip show?

ChartTooltipContent sets indicator="line", a short bar in the series color. With one series, the month sits in that row with the Desktop label and the value. cursor={false} on ChartTooltip turns the hover cursor off.

Can I move across the points with the keyboard?

Yes. accessibilityLayer on AreaChart lets the plotted points take focus. The month tick and the Desktop label in config are the names for each point.

How tall is this chart?

ChartContainer has no size class, so it keeps the default 16:9 box. The frame around it is w-full max-w-xl. Set a height, or aspect-auto with a fixed height, on ChartContainer when you need a different box.

All 70 chart examples