vue-charts Sankey
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.
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. |
name-key | string | 'name' | Node field used for tooltip names |
data-key | string | 'value' | Data key reported on tooltip entries. Link widths always come from value |
width / height / aspect | number | fills the parent | Size. See chart size |
initial-dimension | { width, height } | { width: 640, height: 360 } | Size before the first measurement. See chart size |
title | string | 'Sankey diagram' | Accessible name of the chart |
desc | string | — | Accessible description of the chart |
node-width | number | 10 | Width of each node rectangle |
node-padding | number | 10 | Vertical space between nodes in the same column |
iterations | number | 32 | Number of layout relaxation passes |
margin | { top, right, bottom, left } | { top: 5, right: 5, bottom: 5, left: 5 } | Space around the diagram |
node-fill | string | series 1 token | Fill of node rectangles |
node-stroke | string | 'var(--v-charts-background, #fff)' | Stroke of node rectangles |
link-fill | string | series 1 token | Fill of link paths |
link-stroke | string | 'none' | Stroke of link paths |
is-animation-active | boolean | true | Animate entrance and data changes |
transition | ChartTransition | motion tokens | Timing and easing of data changes |
Events
| Event | Payload | Description |
|---|---|---|
@node-click | (node, index, event: MouseEvent | KeyboardEvent) | A node is clicked, or Enter is pressed on the focused node |
@node-mouseenter, @node-mouseleave | (node, index, event: MouseEvent) | The pointer enters or leaves a node |
@link-click | (link, index, event: MouseEvent) | A link is clicked |
@link-mouseenter, @link-mouseleave | (link, index, event: MouseEvent) | The pointer enters or leaves a link |
@animation-start, @animation-end | () | An animation starts or ends |
node is a SankeyLayoutNode and link a SankeyLayoutLink; both are exported types. The
chart pointer events (@click, @mousemove, …) are also available. See
Events and v-model.
Slots
| Slot | Props | Description |
|---|---|---|
#node | { payload, index, x, y, width, height, fill } | Replace a node rectangle |
#link | { payload, index, d, linkWidth, fill } | Replace a link path. d is the path data; draw it with a stroke of linkWidth |
| 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.