Sankey Diagram
Visualize flow and transitions between stages. Width of connections represents magnitude. Perfect for energy flows, user journeys, and budget allocation.
Usage
import { SankeyChart } from "@chartts/react"
<SankeyChart
nodes={[
{ id: "a", label: "Organic" },
{ id: "b", label: "Paid" },
{ id: "c", label: "Signup" },
{ id: "d", label: "Purchase" },
]}
links={[
{ source: "a", target: "c", value: 400 },
{ source: "b", target: "c", value: 200 },
{ source: "c", target: "d", value: 300 },
]}
/>Props
| Prop | Type | Description |
|---|---|---|
| nodes | { id: string; label: string }[] | Flow nodes |
| links | { source: string; target: string; value: number }[] | Flow connections |
| nodeWidth | number | Node width in px. Default: 20 |
| nodePadding | number | Padding between nodes. Default: 10 |
Features
- Automatic node positioning
- Curved flow paths
- Interactive node dragging
- Highlight connected paths
- Color by source/target
- Animated flow reveal
Other Charts
Line ChartBar ChartArea ChartPie / Donut ChartScatter ChartBubble ChartRadar ChartCandlestick ChartWaterfall ChartFunnel ChartGauge ChartSparklineStacked Bar ChartHorizontal Bar ChartDonut ChartHeatmapBox PlotHistogramTreemapPolar ChartRadial Bar ChartLollipop ChartBullet ChartDumbbell ChartCalendar ChartCombo Chart