Radzen Blazor Sankey Diagram
The Radzen Blazor Sankey Diagram component visualizes flow and relationships between nodes in a system. Perfect for showing how values flow from one set of entities to another, such as energy distribution, budget allocation, or process workflows.
These demos showcase flow visualization with required properties (Data, SourceProperty, TargetProperty, ValueProperty), extensive customization including color schemes, node alignment (Justify/Left/Right/Center), node dimensions, custom labels with SourceLabelProperty and TargetLabelProperty, tooltip customization with ValueFormatter and internationalization support, and optional flow animations.
Basic Usage link
RadzenSankeyDiagram requires four essential properties to display your data:
Data - specifies the data source containing flow information.
SourceProperty - the name of the property that provides the source node identifier.
TargetProperty - the name of the property that provides the target node identifier.
ValueProperty - the name of the property that provides the flow value between nodes.
Configuration Options link
The Sankey Diagram component offers extensive customization options to match your visualization needs:
Color Schemes - Choose from built-in color schemes or define custom colors for nodes and links.
Node Alignment - Control how nodes are positioned vertically with options like Justify, Left, Right, and Center.
Node Dimensions - Adjust node width and padding to optimize the layout for your data.
Labels - Display custom labels for nodes using SourceLabelProperty and TargetLabelProperty.
Tooltip Customization - Format values with ValueFormatter, customize tooltip labels with ValueText, IncomingText, OutgoingText, and FlowText for internationalization support, and apply custom CSS styles with TooltipStyle.
Animations - Toggle flow animations on or off with the Animated property to visualize data movement through the diagram.
Radzen Blazor Components, © 2018-2025 Radzen.
Source Code licensed under
MIT