SankeyChart
Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.
A flow diagram that visualizes quantities between nodes using proportional-width bands. Each node sits one column to the right of the furthest node that flows into it, and every node in a column shares that column's pattern. Each flow is drawn as the outline of a band as thick as the quantity it carries, so flows that cross stay visible through each other.
Labels sit beside their nodes, on the left of the nodes in the last column so they stay on the chart. A node too short for its label is left unlabelled.
Links to or from a node that is not in nodes, links worth nothing, and links that would loop back to a node they came from are left out. Nodes that share a label are drawn once.
The diagram stretches to fill whatever box it is laid out in, including a widget's stored preview. Its labels keep their size.
Import
import { SankeyChart } from "~lib/charts/sankey-chart";
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
nodes | { label: string }[] | Yes | N/A | Nodes to display |
links | { source: string; target: string; value: number }[] | Yes | N/A | Flows between nodes |
showLabels | boolean | No | true | Show node labels |
showValues | boolean | No | false | Show flow totals next to labels |
nodeWidth | number | No | 12 | Width of node bars, in pixels |
nodePadding | number | No | 8 | Gap between nodes in a column, in pixels |
width | number | string | No | 300 | Chart width |
height | number | string | No | 300 | Chart height |
Examples
Simple
With Values
Two Columns
Many Layers
Unequal Flows
See Also
- FunnelChart — Sequential funnel visualization
- TreeMap — Hierarchical area chart