Streamgraph

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

Stacked flows over time around a centre baseline, with silhouette, wiggle, expand (shares) and zero offsets: a legend that turns layers on and off, a tooltip that follows the pointer or the arrow keys, and hatched periods where a layer was not measured.

Use it for

How the mix of categories shifts over time when the overall shape matters more than exact values: tickets by topic, traffic by platform.

Not for

Exact values per period (area-chart stacked, or bar-chart).
A few series where each level matters (line-chart).

Anatomy

title, description, actions (offset switch), legend (toggle buttons), table button
plot (focusable)
layers (smooth bands)
time axis
share axis (expand only)
guide line and tooltip at the active period
hatched band at a period where a layer was not measured

Variants

0: offset: wiggle (minimises layer slopes) · silhouette (centred) · expand (shares of 100%) · zero (flat baseline)

States

loading (skeleton)
empty
missing value: the layer thins to nothing there, a hatched band marks the period, tooltip and table say Not measured
layers hidden from the legend (the rest reflow)
active period (guide, tooltip; the layer under the pointer leads)
every layer hidden (a note says so)
table view
right-to-left: time still runs left to right

Keyboard

Tab focuses the plot (a slider over the periods whose value text reads every layer); ←/→ move the tooltip period by period, Home/End to the ends, Escape hides it
Legend buttons toggle layers (aria-pressed)
The table button lists every value

Motion

Layers grow out of the baseline once; toggling a layer or the offset reflows at once. Nothing moves under reduced motion.

Props

Prop	Type	Default	Description
`data / x`	`T[] / keyof T`	—	Rows in time order and the column naming each period.
`series`	`ChartSeries[]`	—	Layers from the bottom of the stack up; colours follow the series palette.
`offset`	`"wiggle" \| "silhouette" \| "expand" \| "zero"`	—	Baseline. Default wiggle.
`height`	`number`	—	Plot height. Default 260.
`xFormat / yFormat`	`(v) => string`	—	Period and value formats (ticks, tooltip, table).
`legend`	`boolean`	—	Layer toggles. Default true.
`title / hideTitle / description`	`string / boolean / ReactNode`	—	The figure's name (a heading unless hidden) is always its accessible name.
`table`	`boolean`	—	Offer “View as table”. Default true.
`loading`	`boolean`	—	Skeleton of the chart's shape; keeps the frame's size.
`actions`	`ReactNode`	—	Controls beside the legend (range, offset).
`className`	`string`	—	Lands on the figure.
`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

motion

Import

import { Streamgraph } from "@/components/streamgraph/streamgraph";

Get it

Streamgraph 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