Sankey
Playground
| Source | Target | Value |
|---|---|---|
| Source A | Pot | 60 |
| Source B | Pot | 40 |
| Pot | Sink X | 70 |
| Pot | Sink Y | 30 |
Loading...
Loading syntax highlighting...01 Examples
5-Stage Heating Cost Flow
Complete service-charge example: sources (gas, heat pump, maintenance, chimney sweep) → heating cost pot → heating/hot water → residential units.
| Source | Target | Value |
|---|---|---|
| Gas bill | Heating cost pot | 2.206,09 € |
| Heat pump electricity | Heating cost pot | 1.127,31 € |
| Maintenance | Heating cost pot | 361,02 € |
| Chimney sweep | Heating cost pot | 128,00 € |
| Heating cost pot | Heating | 3.105,03 € |
| Heating cost pot | Hot water | 717,39 € |
| Heating | Unit 4 | 1.855,47 € |
| Heating | Unit 4A | 1.249,56 € |
| Hot water | Unit 4 | 394,77 € |
| Hot water | Unit 4A | 322,62 € |
Loading...
Loading syntax highlighting...Salary Breakdown
Gross salary → income tax / social contributions / net pay. Social contributions branch further into health, pension, unemployment, and care insurance.
| Source | Target | Value |
|---|---|---|
| Gross salary | Income tax | 850 € |
| Gross salary | Social contributions | 1.080 € |
| Social contributions | Health insurance | 360 € |
| Social contributions | Pension insurance | 480 € |
| Social contributions | Unemployment ins. | 90 € |
| Social contributions | Long-term care | 150 € |
| Gross salary | Net pay | 2.570 € |
Loading...
Loading syntax highlighting...Node Alignments
Four layer alignments. The early sink (B) lands in different positions depending on alignment — justify pushes it all the way right, left keeps it at its source layer.
justify
| Source | Target | Value |
|---|---|---|
| Source | Mid | 60 |
| Mid | A | 60 |
| Source | B (early sink) | 30 |
left
| Source | Target | Value |
|---|---|---|
| Source | Mid | 60 |
| Mid | A | 60 |
| Source | B (early sink) | 30 |
right
| Source | Target | Value |
|---|---|---|
| Source | Mid | 60 |
| Mid | A | 60 |
| Source | B (early sink) | 30 |
center
| Source | Target | Value |
|---|---|---|
| Source | Mid | 60 |
| Mid | A | 60 |
| Source | B (early sink) | 30 |
Loading...
Loading syntax highlighting...Compact Embedding
A small height embedded in a card — the layout adapts automatically.
Cashflow Overview
Q1 2026
| Source | Target | Value |
|---|---|---|
| Source | Target | 100 % |
Loading...
Loading syntax highlighting...02 Customization
Custom Tooltip
Custom tooltip content with a conditionally formatted detail field.
| Source | Target | Value |
|---|---|---|
| Gas bill | Heating cost pot | 2.206,09 € |
| Heat pump electricity | Heating cost pot | 1.127,31 € |
| Maintenance | Heating cost pot | 361,02 € |
| Chimney sweep | Heating cost pot | 128,00 € |
| Heating cost pot | Heating | 3.105,03 € |
| Heating cost pot | Hot water | 717,39 € |
| Heating | Unit 4 | 1.855,47 € |
| Heating | Unit 4A | 1.249,56 € |
| Hot water | Unit 4 | 394,77 € |
| Hot water | Unit 4A | 322,62 € |
Loading...
Loading syntax highlighting...03 Accessibility
SVG with role="img"
The SVG has role="img" with an aria-label that lists every connection ("Source → Target:
value"). A screen reader announces the diagram in a single block.
Table Fallback
An sr-only table (source / target / value) is rendered in addition — screen readers that prefer tables can query the data row by row.
Keyboard Navigation
Tab focuses every node and link in sequence. On a focused element, Enter/Space triggers the click handler (onNodeClick / onLinkClick).
Hover + Focus Highlight
Hovering or focusing a node dims all unconnected paths and nodes and highlights its direct connections.
04 API Reference
27 props 2 required
Add filter
Grouping
Summary
Column visibility
No matching properties |
No matching properties
05 Installation
Import
Loading...
Loading syntax highlighting...