Charts
Sankey
Flow diagrams showing the magnitude of flow between nodes
Sankey diagrams visualize flow quantities between a set of nodes, where the width of each link is proportional to its value. They are ideal for showing energy flows, user journeys, budget allocations, and similar many-to-many relationships.
Simple Sankey
A basic Sankey diagram with nodes and weighted links. The layout is computed by d3-sankey.
Custom Node
Use the #node slot to fully customize how each node is rendered. The slot receives coordinates, dimensions, and the node payload.
Sankey props
| Prop | Type | Default | Description |
|---|---|---|---|
data | { nodes, links } | required | Graph data with nodes and links arrays. Links use numeric source/target indices and a value. |
width | number | required | Chart width in pixels |
height | number | required | Chart height in pixels |
nodeWidth | number | 10 | Width of each node rectangle |
nodePadding | number | 10 | Vertical padding between nodes in the same column |
iterations | number | 32 | Number of d3-sankey layout iterations for relaxation |
margin | { top, right, bottom, left } | { top: 5, right: 5, bottom: 5, left: 5 } | Chart margins |
nodeFill | string | '#0088fe' | Default fill color for node rectangles |
nodeStroke | string | '#fff' | Stroke color for node rectangles |
linkFill | string | '#0088fe' | Default fill color for link paths |
linkStroke | string | 'none' | Stroke color for link paths |
isAnimationActive | boolean | true | Enable entrance animation |
transition | AnimationOptions | { duration: 0.8, ease: 'easeOut' } | Animation timing (motion-v) |
Slots
| Slot | Props | Description |
|---|---|---|
#node | { x, y, width, height, index, payload } | Custom node rendering |
#link | { d, sourceX, targetX, sourceY, targetY, linkWidth, index, payload } | Custom link path rendering |
default | — | Place <Tooltip> or other child components here. |
Data structure
const data = {
nodes: [
{ name: 'A' },
{ name: 'B' },
{ name: 'C' },
],
links: [
{ source: 0, target: 1, value: 10 },
{ source: 1, target: 2, value: 6 },
],
}
source and target are numeric indices into the nodes array. value determines the link width. Both nodes and links support <Tooltip> hover interaction.