Radzen Blazor Components

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.

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.

info
This example demonstrates the comprehensive configuration options available for the Sankey Diagram component. Experiment with different color schemes, node alignments, dimensions, and tooltip formatting options to customize the visualization for your needs.
Pastel
Justify
All the tools in one place

Code Less. Deliver More.

With Radzen Subscription you get the full toolkit. Get started now and save hours on every project.

task_alt

Complete Blazor development environment.

task_alt

Open technology stack. No vendor lock-in.

task_alt

Ready-to-use UI blocks and app templates.

task_alt

Advanced theming.

task_alt

Dedicated support backed by proven expertise.

task_alt

No hidden runtime costs.

Radzen Blazor Studio

Radzen Blazor Components, © 2018-2025 Radzen.
Source Code licensed under MIT

Demos Configuration

Premium Themes

  • Material 3
  • Material 3 Dark
  • Fluent
  • Fluent Dark

Free Themes

  • Material
  • Material Dark
  • Standard
  • Standard Dark
  • Default
  • Dark
  • Humanistic
  • Humanistic Dark
  • Software
  • Software Dark
An error has occurred. This app may no longer respond until reloaded. Reload 🗙