SankeyDiagram
Display quantities flowing between nodes as ribbons arranged by dependency order.
Component behavior
SankeyDiagram displays weighted links between nodes. Link width represents quantity. Nodes are arranged in columns using longest-path layering.
Use cases
- Directed flows with splitting and merging volumes.
- Data lineage or dependency maps between named nodes.
- Comparisons of volume retained or lost along different paths.
Alternatives
FunnelChart: the flow has one linear sequence without branches.
SlopeGraph: only two endpoints and their change must be compared.
Props
Declare the nodes by id, then the links between them. The graph must be acyclic; a link referencing an unknown node is skipped. Each node's height is the larger of its inflow and outflow, so conserved flows produce balanced nodes.
| Prop | Type | Default | Description |
|---|---|---|---|
nodes | SankeyNode[] | — | Nodes keyed by id, with an optional label and color. Colors fall back to the shared palette. |
links | SankeyLink[] | — | Directed flows: source id, target id, value, and an optional color (defaults to the source node's color). |
width | number | 560 | Layout width in pixels; the diagram scales to its container. |
height | number | 320 | Layout height in pixels. |
nodeWidth | number | 12 | Width of the node bars. |
nodeGap | number | 14 | Vertical gap between stacked nodes in a column. |
formatValue | (value: number) => string | — | Formats flow values in link tooltips. |
Examples
Conversion path
Hover a node to trace every flow upstream and downstream of it.
import { SankeyDiagram } from "@solarius/onset";
import type { SankeyNode, SankeyLink } from "@solarius/onset";