Sankey Diagram ^0.1.20

Flow diagram showing quantity transfer between nodes. Perfect for energy flows, user journeys, revenue splits, and transition analysis.

Basic

<VxSankeyChart
  :nodes="[{ id: 'A' }, { id: 'B' }, { id: 'C' }, { id: 'D' }]"
  :links="[
    { source: 'A', target: 'C', value: 10 },
    { source: 'A', target: 'D', value: 5 },
    { source: 'B', target: 'C', value: 8 },
    { source: 'B', target: 'D', value: 12 },
  ]"
/>

Website traffic flow

<VxSankeyChart :nodes="traffic.nodes" :links="traffic.links" :height="460" />

Energy flow

<VxSankeyChart :nodes="energy.nodes" :links="energy.links" />

Budget allocation with custom colors

<VxSankeyChart
  :nodes="[
    { id: 'Revenue', color: '#22c55e' },
    { id: 'Engineering', color: '#6366f1' },
    { id: 'Tooling', color: '#f59e0b' },
    ...
  ]"
  :links="[...]"
/>

Career paths

<VxSankeyChart :nodes="career.nodes" :links="career.links" />

Infer nodes from links

Omit nodes — the chart builds them from the union of link sources and targets.

<VxSankeyChart
  :links="[
    { source: 'A', target: 'C', value: 10 },
    { source: 'A', target: 'D', value: 5 },
    ...
  ]"
/>

Compact (thin nodes)

<VxSankeyChart :nodes="nodes" :links="links" :nodeWidth="8" :linkOpacity="0.45" />

Without values in labels

<VxSankeyChart :nodes="nodes" :links="links" :showValues="false" />

Props

Prop	Type	Default	Description
nodes	SankeyNode[]	[]	{ id, name?, color? } — inferred from links if empty
links	SankeyLink[]	[]	{ source, target, value, color? }
height	number	420	SVG height
nodeWidth	number	16	Node bar width
nodeGap	number	14	Vertical gap between nodes
nodeRadius	number	3	Node corner radius
colors	string[]	[]	Palette override
linkOpacity	number	0.35	Base link opacity
showLabels	boolean	true	Show node names
showValues	boolean	true	Append values in labels
tooltip	boolean	true	Hover tooltip
animate	boolean	true	Fade in on mount
iterations	number	12	Layout relaxation steps

Events

Event	Payload
hover-node	{ node }
hover-link	{ link }
click-node	{ node }
click-link	{ link }