Sankey chart

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

Flows between stages as bands whose width is the amount: sources to pages to outcomes, budgets to teams; hovering or focusing a node lights its flows and reads its totals in and out.

Use it for

Funnels with branching (traffic source to page to outcome).
Where an amount goes (budget to teams to projects).

Not for

A straight funnel without branches (bar-list).
Shares of one whole (pie-chart).
Process steps without amounts (flowchart).

Anatomy

title
nodes (bars with label and total)
links (bands)
table button

Variants

0: link: gradient · source · neutral
1: nodeWidth, nodePadding

States

loading (skeleton)
empty
active node or link (others dim)
pinned node
table view (from, to, amount)
error (the links loop: an alert names the loop and says how to fix it; nothing is drawn, the table still lists every flow)

Keyboard

Tab moves through the nodes; focus lights the node's flows
Enter or Space pins it (aria-pressed); Escape clears

Motion

Bands fade in once by stage; highlight and dimming take 150 ms. Nothing moves under reduced motion.

Props

Prop	Type	Default	Description
`nodes`	`{ id, label, color? }[]`	—
`links`	`{ from, to, value }[]`	—	Amounts between node ids; the graph must not loop.
`title / hideTitle / description`	`string / boolean / ReactNode`	—	The figure's name is always its accessible name.
`format`	`(v: number) => string`	—
`table`	`boolean`	—	Offer the table view (default on).
`loading`	`boolean`	—
`actions`	`ReactNode`	—
`className`	`string`	—
`link`	`"gradient" \| "source" \| "neutral"`	—
`nodeWidth / nodePadding`	`number`	—
`height`	`number`	—
`active / defaultActive / onActiveChange`	`string \| null`	—	The selected item; hover and focus preview others.
`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.

Import

import { SankeyChart } from "@/components/sankey-chart/sankey-chart";

Get it

Sankey 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