Charts
SankeyChart
Where a quantity goes as it moves through stages.
When to reach for it
A funnel, a budget, an energy or traffic breakdown. The only chart here whose data is a graph rather than a table.
Examples
default
| from | To | Value |
|---|---|---|
| Search | Signed up | 42 |
| Search | Browsed | 68 |
| Social | Browsed | 51 |
| Social | Left | 34 |
| Direct | Signed up | 27 |
| Direct | Left | 18 |
links and labels
| from | To | Value |
|---|---|---|
| Search | Signed up | 42 |
| Search | Browsed | 68 |
| Social | Browsed | 51 |
| Social | Left | 34 |
| Direct | Signed up | 27 |
| Direct | Left | 18 |
loading
Notes
Where a quantity goes as it moves through stages — the shape for a funnel, a budget, an energy or traffic breakdown.
The only chart here whose data is a GRAPH rather than a table, so it takes { nodes, links } instead of rows, and the table view lists the flows rather than the nodes.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | ReactNode | The composed parts — axes, grid, tooltip, legend, and the marks themselves. | |
| configrequired | ChartConfig | Node names → their label and paint. | |
| datarequired | SankeyData | The nodes and the links between them, in Recharts' own shape. | |
| titlerequired | string | What the chart shows, in a sentence a reader could act on. Required, and announced to a screen reader even when it is not printed. | |
| align | 'left' | 'justify' | 'justify' | How nodes are placed along the flow axis. |
| className | string | Merged onto the figure, last, so a call site can size or space it. | |
| defaultSelectedNode | string | null | null | The node lit on first render. Selecting one dims every flow it does not touch. |
| description | ReactNode | A line under the title — the unit, the window, the caveat. | |
| hideDataTable | boolean | false | Drops the hidden table view. Only correct when the page prints the data itself. |
| isLoading | boolean | false | Swaps the marks for an animated skeleton, keeping the measured height so the page does not jump when the data lands. |
| iterations | number | 32 | Layout passes. More is tidier and slower. |
| linkCurvature | number | 0.5 | 0 draws straight links, 1 the fullest curve. |
| nodePadding | number | 10 | Vertical gap between nodes in the same column, in pixels. |
| nodeWidth | number | 10 | How wide each node rectangle is, in pixels. |
| onSelectionChange | (selection: { name: string; value: number } | null) => void | Fires when the selection changes, and with null when it is cleared. | |
| sankeyProps | Omit<SankeyProps, 'data'> | Escape hatch onto the raw Recharts Sankey element. | |
| showTitle | boolean | Prints the title above the plot instead of hiding it from sight. | |
| sort | boolean | true | Lets the layout reorder nodes for the fewest crossings. |
| verticalAlign | 'justify' | 'top' | 'justify' | How nodes are distributed within a column. |
Types
export type SankeyLinkVariant = 'gradient' | 'solid' | 'source' | 'target'
export type SankeyLabelPosition = 'inside' | 'outside'Accessibility
- title is required. The hidden table lists the FLOWS rather than the nodes — a table of node totals would lose every “from → to” the diagram exists to show.
- Four link variants: gradient reads as flow, source and target attribute a band to one end, solid gives up colour and lets the nodes carry identity.