Sankey chart
Sankey flow diagram with our own column layout, gradient cubic links, node values and hover or keyboard path highlighting.
Preview
Where October’s trials went
Hover a step to trace it| From | To | Value |
|---|---|---|
| Search | Started trial | 620 |
| Referral | Started trial | 340 |
| Social | Started trial | 280 |
| Started trial | Active in week 1 | 790 |
| Started trial | Went idle | 450 |
| Active in week 1 | Upgraded | 410 |
| Active in week 1 | Cancelled | 380 |
| Went idle | Upgraded | 60 |
| Went idle | Cancelled | 390 |
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| nodes | { id: string; label: string; color?: string }[] | — | Steps; columns come from the links. |
| links | { source: string; target: string; value: number }[] | — | Flows between steps (acyclic). |
| label | string | — | Accessible name and table caption. |
| height | number | 320 | Height in px; width follows the container. |
| nodeWidth | number | 10 | Node bar width in px. |
| nodePadding | number | 14 | Vertical gap between nodes in a column. |
| valueFormatter | (value: number) => string | Intl number | Formats node and link values. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.