Area chart

A React component in Beamline's Charts & data-vis category.

Amounts over time as filled areas: overlapping, stacked or as shares of 100%, five fills, two strokes, five curves, a range handle; gaps for missing values, a legend that toggles series and a table view of every number.

Use it for

Volume over time where the total matters (revenue by plan, traffic by source).
Shares of a whole over time (Share stacking).

Not for

Comparing exact values between series (line-chart).
Categories rather than time (bar-chart).
Prices with candles and live ticks (price-chart).

Anatomy

title and description (figcaption; can be visually hidden)
actions slot (range, type)
legend (toggle buttons)
table button
plot (kept left to right in RTL: time runs one way, O1 D2; axis labels may reach into the card padding rather than be cut)
tooltip
areas
range handle (brush)

Variants

0: stack: none · stacked · expanded
1: fill: gradient · solid · hatched · dotted · lines · none
2: stroke: solid · dashed
3: curve: linear · monotone · step · bump · natural
4: brush

States

loading (skeleton bars)
empty (no data for the range)
missing values (gap, hatched or stub; tooltip and table say Not measured)
series hidden from the legend
table view

Keyboard

Tab focuses the plot; ←/→ (or ↑/↓) move the tooltip point by point, including onto unmeasured points; the first press starts at an end; Home/End jump; Escape hides the tooltip
Legend buttons toggle series (aria-pressed)
The table button switches to a table of every value and back
With brush: each end of the range handle is a slider; ←/→ move it one point

Motion

Areas are revealed left to right once (chart duration); afterwards a change of stacking, a hidden series or new data carries the areas to their new shapes over the same duration. Nothing moves under reduced motion. The tooltip follows pointer or keys.

Props

Prop	Type	Default	Description
`data / x`	`T[] / keyof T`	—	Rows and the column on the category axis.
`series`	`ChartSeries[]`	—	{ key, label, color?, format?, dashed? } per plotted column; colours follow the series palette.
`title / hideTitle / description`	`string / boolean / ReactNode`	—	The figure's name is always its accessible name.
`xFormat / yFormat`	`(v) => string`	—	Tick, tooltip and table formats.
`height`	`number`	—
`grid / legend / table`	`boolean`	—	Default on.
`loading`	`boolean`	—
`actions`	`ReactNode`	—	Controls beside the legend.
`className`	`string`	—
`stack`	`"none" \| "stacked" \| "expanded"`	—
`fill`	`"gradient" \| "solid" \| "hatched" \| "dotted" \| "lines" \| "none"`	—
`stroke`	`"solid" \| "dashed"`	—
`curve`	`ChartCurve`	—
`brush`	`boolean`	—	A range handle to zoom into part of the series.
`classNames`	`ChartClassNames`	—	Frame, tooltip and slice-list parts as applicable to this chart.
`style / ref`	`CSSProperties / Ref<HTMLElement>`	—	The native chart figure; layout measurement refs stay internal.

Dependencies

d3-shape, motion

Import

import { AreaChart } from "@/components/area-chart/area-chart";

Get it

Area chart is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent