Components
SankeyDiagram
An SVG Sankey flow diagram showing weighted connections between source and target nodes.
Import
import { SankeyDiagram } from "@sigil-ui/components";Preview
Usage
<SankeyDiagram
sources={[
{ label: "Organic", value: 60 },
{ label: "Paid", value: 30 },
{ label: "Referral", value: 10 },
]}
targets={[
{ label: "Signup", value: 50 },
{ label: "Bounce", value: 40 },
{ label: "Blog", value: 10 },
]}
links={[
{ source: 0, target: 0, value: 40 },
{ source: 0, target: 2, value: 20 },
{ source: 1, target: 0, value: 10 },
{ source: 1, target: 1, value: 20 },
{ source: 2, target: 1, value: 10 },
]}
/>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.