Blazor Sankey | Live Tracking

Overview

Blazor Sankey 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.

Overview for Blazor Sankey.

Blazor Sankey Code Example

Easily get started with the Blazor Sankey 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.

razor

@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 }
         };
     }
 }

Rated by users across the globe

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.