React stacked area chart — composition shift over time, capped at three series. Tiny accessible SVG microchart; RSC-safe static or /interactive.

StackedArea answers "how is the composition shifting over time?" Layer thickness is share; the stack always sums to 100%. Three series is the hard cap — beyond that, thickness at 16 px stops being readable.

StackedArea

interactive · 5.79 kB · static · 3.19 kB

Install

Import & usereact/stacked-area

import { StackedArea } from "@microcharts/react/stacked-area";// mix — real values under “Sample data” below<StackedArea data={mix} title="Traffic mix" />

Sample data

const mix = [  { label: "Mobile", values: [30, 34, 36, 40, 44, 47, 52, 56, 58, 60, 63, 66] },  { label: "Web", values: [50, 48, 47, 45, 42, 41, 38, 36, 35, 33, 32, 30] },  { label: "API", values: [20, 18, 17, 15, 14, 12, 10, 8, 7, 7, 5, 4] },];

Needs package + stylesheetSet up with AI

Try it

When to use it

Good for — traffic/revenue mix in KPI cards, share-shift stories in sentences.
Avoid for — 4+ series, or exact values over time (SparkGroup of Sparklines).

Sizing

Variants

ridge skin · ascending order · locale

format/locale control the share numbers — the accessible summary and endpoint labels follow the locale's own percent formatting ("66 %" in German, with a space before the sign, not "66%"). The stack itself never changes shape; only the announced and printed numbers localize.

Edge cases

single column

a series at zero

A single column still stacks normally — share is well-defined from one point, it's just a vertical slice with no width to run across. A series pinned at zero collapses to a zero-height layer rather than distorting the others: the remaining series still sum to 100% of what's left.

Four homes

Why this default

Values are normalized to shares before stacking, so the stack reads composition — not magnitude and composition tangled together. order="asc" puts the smallest series on top, where curvature distorts thickness the least.

Accessibility

The accessible name is the share-shift read — "3 series over 12 points; Mobile leads at 66% share." The interactive entry announces every layer at once ("Point 8 of 12: Mobile 56%, Web 36%, API 8%.").

The interactive entry follows the shared interaction contract: arrow keys rove between units on both axes, Home and End jump to the ends, and a click, tap, Enter or Space selects a unit — pinning its readout so it survives blur, until you select it again or press Escape. On touch, a tap pins and a drag scrubs.

Props

Prop	Type	Notes
data*	{ label; values }[]	≤ 3 series (hard cap).
mode	"stacked" \| "ridge"	Ridge = same stack, overlapping-crest skin.
order	"data" \| "asc"	"asc" puts the smallest series on top (least distortion).
label	"last" \| "none"	Endpoint share labels per series (deterministic drop-out).
labelAt	number	Column whose shares feed label="last" (default: final column). The interactive entry passes the focused column so the labels track the crosshair.
curve	"linear" \| "smooth" \| "step"	Line interpolation (default linear); ridge forces smooth.
colors	string[]	Per-series colours, cycled; overrides --mc-cat-N.
animate	boolean	interactiveOpt-in entrance motion when the chart mounts client-side — add `import "@microcharts/react/motion"` once. Inert on the server, on hydrated server HTML, and under `prefers-reduced-motion`.

Plus the shared grammar — data, domain, color, title, summary, format — and the layout props (width, height, className, style) that every chart accepts. Interactive entries also share animate and live, and — wherever a chart has more than one navigable unit — onActive, onSelect, selectedIndex and defaultSelectedIndex; and — wherever the chart shows a hover value — readout. See the shared grammar.