Trusted by the world’s leading companies
Overview
A Blazor Sankey diagram is a flow diagram that displays quantities in proportion to one another, focusing on movement or transfer between process stages. It is an effective tool for visualizing complex systems, energy flows, or any process with transfers between stages.
Why choose Syncfusion Essential Studio® Blazor Sankey?
Interactive Sankey
The tooltip cursor allows users to interact with the sankey diagram and obtain detailed information about nodes and links.
Rich feature set
The Blazor Sankey diagram supports legends, orientations, labels, titles, themes, events, and customizable nodes, links, printing, and exporting.
Adapts to any resolution
Sankey diagrams have a highly responsive layout and an optimized design for desktops, touchscreens, and phones. It works well on all mobile phones that use iOS, Android, or Windows OS.
Attractive, customizable themes
Cutting-edge design with several built-in themes, such as Material 3, Fluent 2, Tailwind CSS, Bootstrap, Material, and Fabric.
Elegant animation
The Sankey diagram provides fluid animation to present data with smooth transitions.
Blazor Sankey diagram Code Example
Easily get started with the Blazor Sankey diagram using a few simple lines of C# code, as demonstrated below. Also, explore our Blazor Sankey Example, which shows you how to render and configure Sankey in Blazor.
@using Syncfusion.Blazor.Sankey
<SfSankey Nodes=@Nodes Links=@Links Title="Device Usage">
<SankeyNodeSettings Width="30" Padding="10"></SankeyNodeSettings>
<SankeyLinkSettings ColorType="SankeyColorType.Source"></SankeyLinkSettings>
<SankeyLegendSettings Visible="true" Position="SankeyLegendPosition.Bottom">
</SfSankey>
@code {
public List<SankeyDataNode> Nodes = new List<SankeyDataNode>();
public List<SankeyDataLink> Links = new List<SankeyDataLink>();
protected override void OnInitialized()
{
base.OnInitialized();
Nodes = new List<SankeyDataNode>()
{
new SankeyDataNode() { Id = "Female", Label = new SankeyDataLabel() { Text = "Female (58%)" } },
new SankeyDataNode() { Id = "Male", Label = new SankeyDataLabel() { Text = "Male (42%)" } },
new SankeyDataNode() { Id = "Tablet", Label = new SankeyDataLabel() { Text = "Tablet (12%)" } },
new SankeyDataNode() { Id = "Mobile", Label = new SankeyDataLabel() { Text = "Mobile (40%)" } },
new SankeyDataNode() { Id = "Desktop", Label = new SankeyDataLabel() { Text = "Desktop (48%)" } },
new SankeyDataNode() { Id = "< 18", Label = new SankeyDataLabel() { Text = "< 18 years (8%)" } },
new SankeyDataNode() { Id = "18-26", Label = new SankeyDataLabel() { Text = "18-26 years (35%)" } },
new SankeyDataNode() { Id = "27-40", Label = new SankeyDataLabel() { Text = "27-40 years (38%)" } },
new SankeyDataNode() { Id = "> 40", Label = new SankeyDataLabel() { Text = "> 40 years (19%)" } }
};
Links = new List<SankeyDataLink>()
{
new SankeyDataLink() { SourceId = "Female", TargetId = "Tablet", Value = 12 },
new SankeyDataLink() { SourceId = "Female", TargetId = "Mobile", Value = 14 },
new SankeyDataLink() { SourceId = "Female", TargetId = "Desktop", Value = 32 },
new SankeyDataLink() { SourceId = "Male", TargetId = "Mobile", Value = 26 },
new SankeyDataLink() { SourceId = "Male", TargetId = "Desktop", Value = 16 },
new SankeyDataLink() { SourceId = "Tablet", TargetId = "< 18", Value = 4 },
new SankeyDataLink() { SourceId = "Tablet", TargetId = "> 40", Value = 8 },
new SankeyDataLink() { SourceId = "Mobile", TargetId = "< 18", Value = 4 },
new SankeyDataLink() { SourceId = "Mobile", TargetId = "18-26", Value = 24 },
new SankeyDataLink() { SourceId = "Mobile", TargetId = "27-40", Value = 10 },
new SankeyDataLink() { SourceId = "Mobile", TargetId = "> 40", Value = 2 },
new SankeyDataLink() { SourceId = "Desktop", TargetId = "18-26", Value = 11 },
new SankeyDataLink() { SourceId = "Desktop", TargetId = "27-40", Value = 28 },
new SankeyDataLink() { SourceId = "Desktop", TargetId = "> 40", Value = 9 }
};
}
}
Legend
The Blazor Sankey diagram supports legends that provide additional information about a node with customization options. Additionally, when the mouse hovers over it, the related data flow links are highlighted.
Tooltips
Sankey diagrams offer options to display tooltips that provide details about the values of nodes and links when the mouse hovers over them.
Print and export
Export Blazor Sankey diagrams to PDF documents or as image formats such as PNG and JPEG on the client side. Print the rendered Sankey diagram directly from the browser.
Orientation
The Sankey diagram supports both horizontal and vertical orientations, allowing flexible data visualization based on the layout and flow requirements of data.
Node labels
The Sankey diagram supports labels that can be used to annotate node details, enhancing the readability and clarity of the visualization.
Customization
The Sankey diagram provides built-in APIs to customize the color of nodes, links, labels, and widths, allowing for visualization that aligns with your design preferences.
Accessibility
Keyboard navigation
Every element in a Sankey diagram is fully keyboard accessible, with major features like legend highlights operable via keyboard commands alone. No mouse interaction is required, ensuring a highly accessible experience for users.
Screen reader
Sankey diagrams provide full WAI-ARIA accessibility support, ensuring compatibility with assistive technologies like screen readers. Its UI features high-contrast visual elements, offering an optimal viewing experience for visually impaired users. Additionally, valid UI descriptions are easily accessible, further enhancing accessibility.
Right to left (RTL)
Right-to-left rendering displays the text and layout of Sankey diagrams from right to left. This improves the user experience and accessibility for RTL languages.
145+ UI components
1200+ interactive Blazor demos
3.3M+ downloads
Not sure how to create your first Blazor Sankey diagram? Our documentation can help.
I’d love to read it nowBlazor Components – 145+ UI and DataViz Components
ALL COMPONENTS
SMART COMPONENTS
GRIDS
DATA VISUALIZATION
FILE VIEWERS & EDITORS
DROPDOWNS
NAVIGATION
INPUTS
BUTTONS
INTERACTIVE CHAT
Frequently Asked Questions
Why should you choose Syncfusion Blazor Sankey?
The Blazor Sankey diagram with a rich set of features offers the following:
- Visualize and analyze complex flow systems with nodes and links.
- One of the best Blazor Sankey diagram components in the market that offers a feature-rich UI to interact with the software.
- Simple configuration and APIs.
- Supports all modern browsers.
- Mobile-touch friendly and responsive.
Expansive learning resources such as demos and documentation to learn quickly and get started with the Blazor Sankey component.
Where can I find the Syncfusion Blazor Sankey diagram demo?
You can find our Blazor Sankey demo, which demonstrates how to render and configure Sankey diagrams.
Can I download and utilize Syncfusion Blazor Sankey diagram for free?
No, this is a commercial product and requires a paid license. However, a free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue, 5 or fewer developers, and 10 or fewer total employees.
How do I get started with Syncfusion Blazor Sankey?
A good place to start would be our comprehensive getting started documentation.
Our Customers Love Us
Having an excellent set of tools and a great support team, Syncfusion® reduces customers’ development time.
Here are some of their experiences.
Here are some of their experiences.
Blazor components
The speed how they adding new Blazor controls and update theirs functionality.
I am using Blazor components. Searching for Blazor components I found that Syncfusion very fast adopted theirs controls for new development platform. Tech support is fast and excellent. The best of best is that they provide free controls for small business.
Igor L,
CEO, Small-Business
Syncfusion objects with a Blazor
I have used some of the Syncfusion objects with a Blazor application. The support group has always been very helpful.
Kris B,
Software Development Consultant, Small-Business
Rated by users across the globe
Syncfusion Blazor Resources
Learning
Documentation
Documentation
Awards
Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion® is proud to hold the following industry awards.
