Blazor Sankey Diagram - Visualize Complex Data Flows in Your App

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