Show how amounts flow from one stage to the next, with link widths proportional to the amount.
Why it helps
- Flows with proportional links
- Clear paths
- Nodes in columns
Where it fits
- Budget flows
- Customer journeys
- Energy flows
Example
<SankeyChart Label="Energy flow" Links="_links" />
@code {
private readonly SankeyLink[] _links =
[
new("Coal", "Electricity", 40),
new("Gas", "Electricity", 30),
new("Wind", "Electricity", 20),
new("Gas", "Heat", 25),
new("Electricity", "Industry", 45),
new("Electricity", "Homes", 35),
new("Electricity", "Losses", 10),
new("Heat", "Homes", 25)
];
}A short fragment. Add @using RayCraft.Blazor.Components to your page and use an interactive render mode.
Part of RayCraft Complete.