Sankey Diagram
An SVG Sankey flow diagram showing weighted connections between source and target nodes.
Preview
Import
import { SankeyDiagram } from "@sigil-ui/components";Usage
<SankeyDiagram sources={[{ label: "Search", value: 64 }, { label: "Direct", value: 36 }]} targets={[{ label: "Docs", value: 58 }, { label: "Components", value: 42 }]} links={[{ source: 0, target: 0, value: 42 }, { source: 0, target: 1, value: 22 }, { source: 1, target: 0, value: 16 }, { source: 1, target: 1, value: 20 }]} />Custom size
<SankeyDiagram width={600} height={300} sources={[...]} targets={[...]} links={[...]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
sources | SankeyNode[] | — | Array of { label, value, color? } source nodes (required) |
targets | SankeyNode[] | — | Array of { label, value, color? } target nodes (required) |
links | SankeyLink[] | — | Array of { source, target, value } index-based links (required) |
width | number | 400 | SVG width in pixels |
height | number | 200 | SVG height in pixels |
className | string | — | Additional CSS classes |
Plus all standard <svg> HTML attributes.