Radzen Blazor Sankey Diagram
A Sankey diagram shows flow between stages as bands whose width is proportional to the amount - ideal for tracing where quantities move and split, like budgets, energy, or user journeys.
Basic Usage linkLink to this section
RadzenSankeyDiagram requires Data, SourceProperty, TargetProperty, and ValueProperty to display flow data.
Color Scheme linkLink to this section
Use the ColorScheme property to choose from built-in color palettes that automatically style nodes and links.
Node Properties linkLink to this section
Control node layout with NodeAlignment (Justify, Left, Right, Center), NodeWidth, and NodePadding.
Custom Colors linkLink to this section
Define custom colors for individual nodes and links using the NodeFills and LinkFills properties.
Custom Tooltips linkLink to this section
Customize tooltip appearance and content with ValueFormatter, ValueText, IncomingText, OutgoingText, FlowText, and TooltipStyle.
Animation linkLink to this section
Toggle flow animations with the Animated property to visualize data movement through the diagram.
Frequently asked questions
When should I use a Sankey diagram?
When you want to show how a quantity flows and divides between stages - traffic from sources to pages, money from income to spending - with the band widths carrying the magnitude.
What data does it need?
A list of links, each with a source node, a target node, and a value. The diagram lays out the nodes and sizes the connecting bands by value.
Is it good for many nodes?
It handles a fair number, but very dense flows get hard to read; group small flows or split the diagram when it gets crowded.
Related
Radzen Blazor Components, © 2018-2026 Radzen.
Source Code licensed under
MIT