Sankey Diagram
Show flows and their relative sizes between stages.
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 }]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
sources (required) | SankeyNode[] | — | Sources configuration. |
targets (required) | SankeyNode[] | — | Targets configuration. |
links (required) | SankeyLink[] | — | Links configuration. |
width | number | — | Width of the rendered content. |
height | number | — | Height of the rendered content. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-primary | Primary |
--s-text-muted | Text muted |
--s-font-mono | Font mono |