Class SfSankey

The SfSankey is a data visualization component that depicts the flow and relationship between different entities using nodes and links. It is commonly used to illustrate energy, material, or cost flows within a system, where the width of the links represents the flow quantity between the nodes. The chart consists of nodes, which represent distinct entities, and links, which represent the connections and flow between these entities. Sankey diagrams are useful for understanding and analyzing large data sets by visualizing the cumulative effect of interrelated entities.

Inheritance
System.Object
SfBaseComponent
SfSankey
Implements
Microsoft.AspNetCore.Components.IHandleEvent
Inherited Members
Namespace: Syncfusion.Blazor.Sankey
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfSankey : SfBaseComponent, IHandleEvent
Examples
SfSankey Width="600px" Height="400px" DataSource="@SankeyData" Title="Device Usage" SubTitle="-2023">
   <SankeyTitleStyle FontSize="16px" FontFamily="Roboto" FontWeight="800"></SankeyTitleStyle>
   <SankeySubtitleStyle FontSize="10px" FontFamily="Roboto" FontWeight="400"></SankeySubtitleStyle>
   <SankeyNodes Width="30" Alignment="SankeyNodeAlign.Left" Offset="10" Padding="10">
   </SankeyNodes>
   <SankeyMargin Left="10" Right="10" Top="10" Bottom="10"></SankeyMargin>
   <SankeyLinks Color="blue" ColorType="ColorType.Source" HighlightOpacity="1" InactiveOpacity="0.3" Opacity="0.7">
   </SankeyLinks>
   <SankeyLabels Visible="true" FontSize="12" Color="black" FontFamily="Arial" FontWeight="400" Padding="8">
   </SankeyLabels>
   <SankeyLegendSettings Visible="true" Position="SankeyLegendPosition.Bottom" Height="10" Width="10">
       <SankeyLegendMargin Left="10" Right="10" Top="10" Bottom="10"> </SankeyLegendMargin>
       <SankeyLegendTextStyle FontSize="10px" FontFamily="Roboto" FontWeight="600" Color="Black" FontStyle="italic">
       </SankeyLegendTextStyle>
       <SankeyLegendTitleStyle FontSize="14px" FontFamily="Roboto" FontWeight="800" Color="Black" FontStyle="italic">
       </SankeyLegendTitleStyle>
   </SankeyLegendSettings>

   <SankeyTooltipSettings Enable="true" Fill="blue" Opacity="0.7">
       <SankeyNodeTemplate>
           @{
               var data = context as SankeyNodeContext;
               if (data != null)
               {
                   <div style="background-color:blue; color:white; padding:5px; border-radius:5px;">
                       <p>@data.Node.Label.Text</p>
                   </div>
               }
           }
       </SankeyNodeTemplate>
       <SankeyLinkTemplate>
           @{
               var data = context as SankeyLinkContext;
               if (data != null)
               {
                   <div style="background-color:blue; color:white; padding:5px; border-radius:5px;">
                       <p>@data.Link.Value</p>
                   </div>
               }
           }
       </SankeyLinkTemplate>
   </SankeyTooltipSettings>
/SfSankey>
code {

   public SankeyData SankeyData = new SankeyData()
   {
       Nodes = new List<SankeyDataNode>(),
       Links = new List<SankeyDataLink>()
   };

   protected override void OnInitialized()
   {
       base.OnInitialized();
       SankeyData.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%)" } }
       };
       SankeyData.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 }
       };
   }
}
SfSankey Width="600px" Height="400px" DataSource="@SankeyData" Title="Device Usage" SubTitle="-2023">
   <SankeyTitleStyle FontSize="16px" FontFamily="Roboto" FontWeight="800"></SankeyTitleStyle>
   <SankeySubtitleStyle FontSize="10px" FontFamily="Roboto" FontWeight="400"></SankeySubtitleStyle>
   <SankeyNodes Width="30" Alignment="SankeyNodeAlign.Left" Offset="10" Padding="10">
   </SankeyNodes>
   <SankeyMargin Left="10" Right="10" Top="10" Bottom="10"></SankeyMargin>
   <SankeyLinks Color="blue" ColorType="ColorType.Source" HighlightOpacity="1" InactiveOpacity="0.3" Opacity="0.7">
   </SankeyLinks>
   <SankeyLabels Visible="true" FontSize="12" Color="black" FontFamily="Arial" FontWeight="400" Padding="8">
   </SankeyLabels>
   <SankeyLegendSettings Visible="true" Position="SankeyLegendPosition.Bottom" Height="10" Width="10">
       <SankeyLegendMargin Left="10" Right="10" Top="10" Bottom="10"> </SankeyLegendMargin>
       <SankeyLegendTextStyle FontSize="10px" FontFamily="Roboto" FontWeight="600" Color="Black" FontStyle="italic">
       </SankeyLegendTextStyle>
       <SankeyLegendTitleStyle FontSize="14px" FontFamily="Roboto" FontWeight="800" Color="Black" FontStyle="italic">
       </SankeyLegendTitleStyle>
   </SankeyLegendSettings>

   <SankeyTooltipSettings Enable="true" Fill="blue" Opacity="0.7">
       <SankeyNodeTemplate>
           @{
               var data = context as SankeyNodeContext;
               if (data != null)
               {
                   <div style="background-color:blue; color:white; padding:5px; border-radius:5px;">
                       <p>@data.Node.Label.Text</p>
                   </div>
               }
           }
       </SankeyNodeTemplate>
       <SankeyLinkTemplate>
           @{
               var data = context as SankeyLinkContext;
               if (data != null)
               {
                   <div style="background-color:blue; color:white; padding:5px; border-radius:5px;">
                       <p>@data.Link.Value</p>
                   </div>
               }
           }
       </SankeyLinkTemplate>
   </SankeyTooltipSettings>
/SfSankey>
code {

   public SankeyData SankeyData = new SankeyData()
   {
       Nodes = new List<SankeyDataNode>(),
       Links = new List<SankeyDataLink>()
   };

   protected override void OnInitialized()
   {
       base.OnInitialized();
       SankeyData.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%)" } }
       };
       SankeyData.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 }
       };
   }
}
SfSankey Width="600px" Height="400px" DataSource="@SankeyData" Title="Device Usage" SubTitle="-2023">
   <SankeyTitleStyle FontSize="16px" FontFamily="Roboto" FontWeight="800"></SankeyTitleStyle>
   <SankeySubtitleStyle FontSize="10px" FontFamily="Roboto" FontWeight="400"></SankeySubtitleStyle>
   <SankeyNodes Width="30" Alignment="SankeyNodeAlign.Left" Offset="10" Padding="10">
   </SankeyNodes>
   <SankeyMargin Left="10" Right="10" Top="10" Bottom="10"></SankeyMargin>
   <SankeyLinks Color="blue" ColorType="ColorType.Source" HighlightOpacity="1" InactiveOpacity="0.3" Opacity="0.7">
   </SankeyLinks>
   <SankeyLabels Visible="true" FontSize="12" Color="black" FontFamily="Arial" FontWeight="400" Padding="8">
   </SankeyLabels>
   <SankeyLegendSettings Visible="true" Position="SankeyLegendPosition.Bottom" Height="10" Width="10">
       <SankeyLegendMargin Left="10" Right="10" Top="10" Bottom="10"> </SankeyLegendMargin>
       <SankeyLegendTextStyle FontSize="10px" FontFamily="Roboto" FontWeight="600" Color="Black" FontStyle="italic">
       </SankeyLegendTextStyle>
       <SankeyLegendTitleStyle FontSize="14px" FontFamily="Roboto" FontWeight="800" Color="Black" FontStyle="italic">
       </SankeyLegendTitleStyle>
   </SankeyLegendSettings>

   <SankeyTooltipSettings Enable="true" Fill="blue" Opacity="0.7">
       <SankeyNodeTemplate>
           @{
               var data = context as SankeyNodeContext;
               if (data != null)
               {
                   <div style="background-color:blue; color:white; padding:5px; border-radius:5px;">
                       <p>@data.Node.Label.Text</p>
                   </div>
               }
           }
       </SankeyNodeTemplate>
       <SankeyLinkTemplate>
           @{
               var data = context as SankeyLinkContext;
               if (data != null)
               {
                   <div style="background-color:blue; color:white; padding:5px; border-radius:5px;">
                       <p>@data.Link.Value</p>
                   </div>
               }
           }
       </SankeyLinkTemplate>
   </SankeyTooltipSettings>
/SfSankey>
code {

   public SankeyData SankeyData = new SankeyData()
   {
       Nodes = new List<SankeyDataNode>(),
       Links = new List<SankeyDataLink>()
   };

   protected override void OnInitialized()
   {
       base.OnInitialized();
       SankeyData.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%)" } }
       };
       SankeyData.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 }
       };
   }
}
SfSankey Width="600px" Height="400px" DataSource="@SankeyData" Title="Device Usage" SubTitle="-2023">
   <SankeyTitleStyle FontSize="16px" FontFamily="Roboto" FontWeight="800"></SankeyTitleStyle>
   <SankeySubtitleStyle FontSize="10px" FontFamily="Roboto" FontWeight="400"></SankeySubtitleStyle>
   <SankeyNodes Width="30" Alignment="SankeyNodeAlign.Left" Offset="10" Padding="10">
   </SankeyNodes>
   <SankeyMargin Left="10" Right="10" Top="10" Bottom="10"></SankeyMargin>
   <SankeyLinks Color="blue" ColorType="ColorType.Source" HighlightOpacity="1" InactiveOpacity="0.3" Opacity="0.7">
   </SankeyLinks>
   <SankeyLabels Visible="true" FontSize="12" Color="black" FontFamily="Arial" FontWeight="400" Padding="8">
   </SankeyLabels>
   <SankeyLegendSettings Visible="true" Position="SankeyLegendPosition.Bottom" Height="10" Width="10">
       <SankeyLegendMargin Left="10" Right="10" Top="10" Bottom="10"> </SankeyLegendMargin>
       <SankeyLegendTextStyle FontSize="10px" FontFamily="Roboto" FontWeight="600" Color="Black" FontStyle="italic">
       </SankeyLegendTextStyle>
       <SankeyLegendTitleStyle FontSize="14px" FontFamily="Roboto" FontWeight="800" Color="Black" FontStyle="italic">
       </SankeyLegendTitleStyle>
   </SankeyLegendSettings>

   <SankeyTooltipSettings Enable="true" Fill="blue" Opacity="0.7">
       <SankeyNodeTemplate>
           @{
               var data = context as SankeyNodeContext;
               if (data != null)
               {
                   <div style="background-color:blue; color:white; padding:5px; border-radius:5px;">
                       <p>@data.Node.Label.Text</p>
                   </div>
               }
           }
       </SankeyNodeTemplate>
       <SankeyLinkTemplate>
           @{
               var data = context as SankeyLinkContext;
               if (data != null)
               {
                   <div style="background-color:blue; color:white; padding:5px; border-radius:5px;">
                       <p>@data.Link.Value</p>
                   </div>
               }
           }
       </SankeyLinkTemplate>
   </SankeyTooltipSettings>
/SfSankey>
code {

   public SankeyData SankeyData = new SankeyData()
   {
       Nodes = new List<SankeyDataNode>(),
       Links = new List<SankeyDataLink>()
   };

   protected override void OnInitialized()
   {
       base.OnInitialized();
       SankeyData.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%)" } }
       };
       SankeyData.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 }
       };
   }
}
SfSankey Width="600px" Height="400px" DataSource="@SankeyData" Title="Device Usage" SubTitle="-2023">
   <SankeyTitleStyle FontSize="16px" FontFamily="Roboto" FontWeight="800"></SankeyTitleStyle>
   <SankeySubtitleStyle FontSize="10px" FontFamily="Roboto" FontWeight="400"></SankeySubtitleStyle>
   <SankeyNodes Width="30" Alignment="SankeyNodeAlign.Left" Offset="10" Padding="10">
   </SankeyNodes>
   <SankeyMargin Left="10" Right="10" Top="10" Bottom="10"></SankeyMargin>
   <SankeyLinks Color="blue" ColorType="ColorType.Source" HighlightOpacity="1" InactiveOpacity="0.3" Opacity="0.7">
   </SankeyLinks>
   <SankeyLabels Visible="true" FontSize="12" Color="black" FontFamily="Arial" FontWeight="400" Padding="8">
   </SankeyLabels>
   <SankeyLegendSettings Visible="true" Position="SankeyLegendPosition.Bottom" Height="10" Width="10">
       <SankeyLegendMargin Left="10" Right="10" Top="10" Bottom="10"> </SankeyLegendMargin>
       <SankeyLegendTextStyle FontSize="10px" FontFamily="Roboto" FontWeight="600" Color="Black" FontStyle="italic">
       </SankeyLegendTextStyle>
       <SankeyLegendTitleStyle FontSize="14px" FontFamily="Roboto" FontWeight="800" Color="Black" FontStyle="italic">
       </SankeyLegendTitleStyle>
   </SankeyLegendSettings>

   <SankeyTooltipSettings Enable="true" Fill="blue" Opacity="0.7">
       <SankeyNodeTemplate>
           @{
               var data = context as SankeyNodeContext;
               if (data != null)
               {
                   <div style="background-color:blue; color:white; padding:5px; border-radius:5px;">
                       <p>@data.Node.Label.Text</p>
                   </div>
               }
           }
       </SankeyNodeTemplate>
       <SankeyLinkTemplate>
           @{
               var data = context as SankeyLinkContext;
               if (data != null)
               {
                   <div style="background-color:blue; color:white; padding:5px; border-radius:5px;">
                       <p>@data.Link.Value</p>
                   </div>
               }
           }
       </SankeyLinkTemplate>
   </SankeyTooltipSettings>
/SfSankey>
code {

   public SankeyData SankeyData = new SankeyData()
   {
       Nodes = new List<SankeyDataNode>(),
       Links = new List<SankeyDataLink>()
   };

   protected override void OnInitialized()
   {
       base.OnInitialized();
       SankeyData.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%)" } }
       };
       SankeyData.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 }
       };
   }
}

Constructors

SfSankey()

Declaration
public SfSankey()

Properties

AccessibilityDescription

Gets and sets the accessibility description for SfSankey.

Declaration
public string AccessibilityDescription { get; set; }
Property Value
Type Description
System.String

Accepts the string value that specifies the accessibility description for the SfSankey. The default value is empty string.
Remarks

If not set, the Title can be used as the accessibility description for the SfSankey.

AnimationDelay

Gets or sets the delay of animation in milliseconds.

Declaration
public double AnimationDelay { get; set; }
Property Value
Type Description
System.Double

Accepts the double value. The default value is 0.
Remarks

Use the AnimationDelay property to specify the delay duration for animations in milliseconds. A non-zero value adds a delay before the animation starts, providing control over the timing of the animation.

AnimationDuration

Gets or sets the duration of animation in milliseconds.

Declaration
public double AnimationDuration { get; set; }
Property Value
Type Description
System.Double

Accepts the double value. The default value is 2000.
Remarks

Use the AnimationDuration property to specify the duration of animations in milliseconds. The duration determines how long an animation takes to complete, affecting its speed and smoothness.

BackgroundColor

Gets or sets the background color of the SfSankey.

Declaration
public string BackgroundColor { get; set; }
Property Value
Type Description
System.String

A string value specifying the background color of the SfSankey. The default background color is determined by the SfSankey's theme. By default, the theme is set to Fluent2 with a background color of rgba(255,255,255).
Remarks

The value can be specified in hex or rgba format, following valid CSS color string conventions.

BackgroundImage

Gets and sets the background image for SfSankey.

Declaration
public string BackgroundImage { get; set; }
Property Value
Type Description
System.String

A string representing the URL or path to the background image. The default value is empty.
Remarks

The BackgroundImage property allows you to set a custom background image for the SfSankey. Specify the URL or path to the image file to be used as the background.

BorderColor

Gets or sets the border color of the SfSankey.

Declaration
public string BorderColor { get; set; }
Property Value
Type Description
System.String

Accepts the valid CSS color string. The default value is null.
Remarks

Set this property to customize the border color of the SfSankey component. Valid CSS colors can be used such as hex, rgba, and color names.

BorderWidth

Sets and gets the the width of the border in pixels.

Declaration
public double BorderWidth { get; set; }
Property Value
Type Description
System.Double

Accepts the value in pixels. The default value is 1.
Remarks

If the border width is set to 0, then the border will not be visible in the SfSankey component.

ChildContent

Declaration
public RenderFragment ChildContent { get; set; }
Property Value
Type
Microsoft.AspNetCore.Components.RenderFragment

Created

An event that is raised when the SfSankey is created.

Declaration
public Action Created { get; set; }
Property Value
Type Description
System.Action

Accepts an System.Action.
Remarks

You can access information about the created SfSankey.

CssClass

Gets and sets the custom CSS class name for the SfSankey .

Declaration
public string CssClass { get; set; }
Property Value
Type Description
System.String

Accepts the string value. The default value is empty.
Remarks

The CssClass property allows you to apply custom styles to the SfSankey component. Use this property to specify CSS classes that will be applied to the container of the SfSankey.

DataSource

Gets or sets the data source for the SfSankey component.

Declaration
public SankeyData DataSource { get; set; }
Property Value
Type Description
SankeyData

Accepts the collection of SankeyData objects. The default value is null.
Remarks

The following properties are used to define the data source for the SfSankey component:

Other properties are optional and can be used to customize the appearance of the SfSankey.

EnableAnimation

Gets or sets the animation to be enabled or disabled for the SfSankey component.

Declaration
public bool EnableAnimation { get; set; }
Property Value
Type Description
System.Boolean

Accepts the boolean value. The default value is true.
Remarks

Use the EnableAnimation property to enable or disable animations for the SfSankey. When set to true, animations will be enabled, providing visual effects during chart interactions. If the Syncfusion.Blazor.SyncfusionBlazorService.options animation is prioritized, the EnableAnimation property will be ignored.

EnableAutoLayout

Gets or sets the autolayout for the SfSankey component.

Declaration
public bool EnableAutoLayout { get; set; }
Property Value
Type Description
System.Boolean

Accepts the boolean value. The default value is true.
Remarks

Use the EnableAutoLayout property to enable or disable the autolayout feature for the SfSankey.

EnableRTL

Gets or sets the right-to-left (RTL) support for the SfSankey component.

Declaration
public bool EnableRTL { get; set; }
Property Value
Type Description
System.Boolean

Accepts the boolean value. The default value is false.
Remarks

Use the EnableRTL property to enable or disable right-to-left (RTL) layout for the SfSankey. When set to true, the layout will be adjusted to support RTL languages, ensuring that the chart's elements are correctly aligned for languages that are read from right to left.

ExportCompleted

An event that is raised when the SfSankey export operation is completed.

Declaration
public Action<SankeyExportedEventArgs> ExportCompleted { get; set; }
Property Value
Type Description
System.Action<SankeyExportedEventArgs>

Accepts an System.Action with SankeyExportedEventArgs as the type parameter.
Remarks

You can access information about the SfSankey exported dataUrl, base64 string, and more through the SankeyExportedEventArgs event argument.

Height

Gets or sets the height of the SfSankey as a string.

Declaration
public string Height { get; set; }
Property Value
Type Description
System.String

The height of the SfSankey as a string value. The default value is 100%.
Remarks

Accepts input as either pixel or percentage. If specified as '100%', the SfSankey renders to the full height of its parent element.

ID

Gets or sets the ID for the SfSankey component.

Declaration
public string ID { get; set; }
Property Value
Type Description
System.String

Accepts the string value. The default value is auto generated randomly with prefix of "sankeychart".
Remarks

The ID property allows you to specify a unique identifier for the SfSankey component. If not explicitly set, the ID is generated automatically with the specified prefix.

LabelRendering

An event that is raised when the label is rendered in the SfSankey.

Declaration
public Action<SankeyLabelRenderEventArgs> LabelRendering { get; set; }
Property Value
Type Description
System.Action<SankeyLabelRenderEventArgs>

Accepts an System.Action with SankeyLabelRenderEventArgs as the type parameter.
Remarks

Use the LabelRendering event to customize or get notified when a label is rendered.

LegendItemHover

An event that is raised when the mouse hovers over a legend item in the SfSankey.

Declaration
public Action<SankeyLegendItemHoverEventArgs> LegendItemHover { get; set; }
Property Value
Type Description
System.Action<SankeyLegendItemHoverEventArgs>

Accepts an System.Action with SankeyLegendItemHoverEventArgs as the type parameter.
Remarks

Use the LegendItemHover event to get notified when the mouse hovers over a legend item in the SfSankey.

LegendItemRendering

An event that is raised before each legend item is rendered on the SfSankey.

Declaration
public Action<SankeyLegendRenderEventArgs> LegendItemRendering { get; set; }
Property Value
Type Description
System.Action<SankeyLegendRenderEventArgs>

Accepts an System.Action with SankeyLegendRenderEventArgs as the type parameter.
Remarks

You can access information about the legend item being rendered through the SankeyLegendRenderEventArgs event argument also able to customize legend text, shape, and fill color.

LinkClick

An event that is raised when a link in the SfSankey is clicked.

Declaration
public Action<SankeyLinkEventArgs> LinkClick { get; set; }
Property Value
Type Description
System.Action<SankeyLinkEventArgs>

Accepts an System.Action with SankeyLinkEventArgs as the type parameter.
Remarks

Use the LinkClick event to get notified when a link is clicked.

LinkCurvature

Gets or sets the flow curvature of the link in the SfSankey component.

Declaration
public double LinkCurvature { get; set; }
Property Value
Type Description
System.Double

Accepts the double value. The default value is 1.
Remarks

Using this property, you can set the curvature of the link in the SfSankey component. If the value is set to 0, the link will be straight. It ranges from 0 to 1.

LinkEnter

An event that is raised when the mouse enters a link in the SfSankey.

Declaration
public Action<SankeyLinkEventArgs> LinkEnter { get; set; }
Property Value
Type Description
System.Action<SankeyLinkEventArgs>

Accepts an System.Action with SankeyLinkEventArgs as the type parameter.
Remarks

Use the LinkEnter event to get notified when the mouse enters a link.

LinkLeave

An event that is raised when the mouse leaves a link in the SfSankey.

Declaration
public Action<SankeyLinkEventArgs> LinkLeave { get; set; }
Property Value
Type Description
System.Action<SankeyLinkEventArgs>

Accepts an System.Action with SankeyLinkEventArgs as the type parameter.
Remarks

Use the LinkLeave event to get notified when the mouse leaves a link.

LinkRendering

An event that is raised when a link is rendered in the SfSankey.

Declaration
public Action<SankeyLinkRenderEventArgs> LinkRendering { get; set; }
Property Value
Type Description
System.Action<SankeyLinkRenderEventArgs>

Accepts an System.Action with SankeyLinkRenderEventArgs as the type parameter.
Remarks

Use the LinkRendering event to customize or get notified when a link is rendered.

NodeClick

An event that is raised when a node in the SfSankey is clicked.

Declaration
public Action<SankeyNodeEventArgs> NodeClick { get; set; }
Property Value
Type Description
System.Action<SankeyNodeEventArgs>

Accepts an System.Action with SankeyNodeEventArgs as the type parameter.
Remarks

Use the NodeClick event to get notified when a node is clicked.

NodeEnter

An event that is raised when the mouse enters a node in the SfSankey.

Declaration
public Action<SankeyNodeEventArgs> NodeEnter { get; set; }
Property Value
Type Description
System.Action<SankeyNodeEventArgs>

Accepts an System.Action with SankeyNodeEventArgs as the type parameter.
Remarks

Use the NodeEnter event to get notified when the mouse enters a node.

NodeLeave

An event that is raised when the mouse leaves a node in the SfSankey.

Declaration
public Action<SankeyNodeEventArgs> NodeLeave { get; set; }
Property Value
Type Description
System.Action<SankeyNodeEventArgs>

Accepts an System.Action with SankeyNodeEventArgs as the type parameter.
Remarks

Use the NodeLeave event to get notified when the mouse leaves a node.

NodeRendering

An event that is raised when a node is rendered in the SfSankey.

Declaration
public Action<SankeyNodeRenderEventArgs> NodeRendering { get; set; }
Property Value
Type Description
System.Action<SankeyNodeRenderEventArgs>

Accepts an System.Action with SankeyNodeRenderEventArgs as the type parameter.
Remarks

Use the NodeRendering event to customize or get notified when a node is rendered.

Orientation

Get or set the orientation of the SfSankey component.

Declaration
public Orientation Orientation { get; set; }
Property Value
Type Description
Orientation

Accepts the Orientation enum value. The default value is Auto.
Remarks

By default the Orientation property is set to Auto. The orientation of the SfSankey component is automatically determined based on the available space.

PrintCompleted

An event that is raised when the SfSankey print operation is completed.

Declaration
public Action PrintCompleted { get; set; }
Property Value
Type
System.Action
Remarks

You can get notified when the print operation is completed through the PrintCompleted event.

SizeChanged

An event that is raised when the size of the SfSankey changes.

Declaration
public Action<SankeySizeChangedEventArgs> SizeChanged { get; set; }
Property Value
Type Description
System.Action<SankeySizeChangedEventArgs>

Accepts an System.Action with SankeySizeChangedEventArgs as the type parameter.
Remarks

Use the SizeChanged event to respond to changes in the chart's dimensions.

SubTitle

Gets or sets the subtitle of the SfSankey component.

Declaration
public string SubTitle { get; set; }
Property Value
Type Description
System.String

A string representing the subtitle of the SfSankey. The default value is an empty string.
Remarks

This SubTitle property allows you to provide additional information or context to the SfSankey title. This is only applicable when the Title property is set.

TabIndex

Gets and sets the tabIndex for SfSankey element.

Declaration
public double TabIndex { get; set; }
Property Value
Type Description
System.Double

Accepts the integer value that specifies the tabIndex for the SfSankey element. The default value is 0.
Remarks

When the TabIndex property is set, the SfSankey element can be focused and navigated using the keyboard at the specified tabIndex.

Theme

Gets or sets the theme for the SfSankey.

Declaration
public Theme Theme { get; set; }
Property Value
Type Description
Theme

One of the Theme enumerations that specifies the theme of the SfSankey component. The default value is Theme.Fluent2.
Remarks

SfSankey element's color and text get modified, such as fill, font size, font family, and font style, which enhances the overall SfSankey appearance based on the predefined theme applied.

Title

Gets or sets the title of the SfSankey component.

Declaration
public string Title { get; set; }
Property Value
Type Description
System.String

A string representing the title of the SfSankey. The default value is an empty string.
Remarks

The Title property allows you to provide a descriptive title for the SfSankey, offering users a quick insight into the data it represents. It's recommended to use clear and concise titles that summarize the main purpose or focus of the sankey chart. Adding a title can significantly enhance the overall readability and understanding of the sankey chart, especially in scenarios with complex or diverse data sets.

TooltipRendering

An event that is raised when a tooltip is rendered in the SfSankey.

Declaration
public Action<SankeyTooltipRenderEventArgs> TooltipRendering { get; set; }
Property Value
Type Description
System.Action<SankeyTooltipRenderEventArgs>

Accepts an System.Action with SankeyTooltipRenderEventArgs as the type parameter.
Remarks

Use the TooltipRendering event to customize or get notified when a tooltip is rendered.

Width

Gets or sets the width of the SfSankey as a string.

Declaration
public string Width { get; set; }
Property Value
Type Description
System.String

The width of SfSankey as string value. The default value is "100%" .
Remarks

Accepts input as either pixel or percentage. If specified as '100%', the SfSankey renders to the full width of its parent element.

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
Type Name Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder

ConfigureMargins(SankeyMargin)

Declaration
public void ConfigureMargins(SankeyMargin margin)
Parameters
Type Name Description
SankeyMargin margin

ExportAsync(ExportType, String, Nullable<PdfPageOrientation>, Boolean, Boolean)

The method is used to perform the export functionality for the rendered SfSankey.

Declaration
public Task ExportAsync(ExportType type, string fileName, Nullable<PdfPageOrientation> orientation = null, bool allowDownload = true, bool isBase64 = false)
Parameters
Type Name Description
ExportType type

Specifies the export type for the rendered SfSankey.
System.String fileName

Specifies the filename.
System.Nullable<Syncfusion.PdfExport.PdfPageOrientation> orientation

Specifies the portrait or landscape orientation of the page.
System.Boolean allowDownload

Specifies whether to download or not.
System.Boolean isBase64

Specify whether to obtain the SfSankey image as a base64 string or not.
Returns
Type Description
System.Threading.Tasks.Task

Export the SfSankey with sepcifies export type.
Examples
<SfSankeyChart @ref="sankeychartObj" Width="600px" Height="400px" DataSource="@SankeyData">
    <SankeyChartNodes Width="30" Alignment="SankeyNodeAlign.Left" OffsetX="10" OffsetY="10" Padding="10">
    </SankeyChartNodes>
    <SankeyChartLinks Color="blue" ColorType="ColorType.Static" HighlightOpacity="1" InactiveOpacity="0.3" Opacity="0.7"> </SankeyChartLinks>
</SfSankeyChart>
<button @onclick="ExportSankeyChart">ExportSankeyChart</button>
@code {
   SfSankeyChart sankeychartObj;

    public SankeyChartData SankeyData = new SankeyChartData()
    {
        Nodes = new List<SankeyChartDataNode>(),
        Links = new List<SankeyChartDataLink>()
    };
    public async Task ExportSankeyChart()
    {
       await sankeychartObj.ExportAsync(ExportType.PNG, "SankeyChart");
    }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        SankeyData.Nodes = new List<SankeyChartDataNode>()
        {
            new SankeyChartDataNode() { Id = "Female", Label = new SankeyChartDataLabel() { Text = "Female (58%)" } },
            new SankeyChartDataNode() { Id = "Male", Label = new SankeyChartDataLabel() { Text = "Male (42%)" } },
            new SankeyChartDataNode() { Id = "Tablet", Label = new SankeyChartDataLabel() { Text = "Tablet (12%)" } },
            new SankeyChartDataNode() { Id = "Mobile", Label = new SankeyChartDataLabel() { Text = "Mobile (40%)" } },
            new SankeyChartDataNode() { Id = "Desktop", Label = new SankeyChartDataLabel() { Text = "Desktop (48%)" } },
            new SankeyChartDataNode() { Id = "< 18", Label = new SankeyChartDataLabel() { Text = "< 18 years (8%)" } },
            new SankeyChartDataNode() { Id = "18-26", Label = new SankeyChartDataLabel() { Text = "18-26 years (35%)" } },
            new SankeyChartDataNode() { Id = "27-40", Label = new SankeyChartDataLabel() { Text = "27-40 years (38%)" } },
            new SankeyChartDataNode() { Id = "> 40", Label = new SankeyChartDataLabel() { Text = "> 40 years (19%)" } }
        };
        SankeyData.Links = new List<SankeyChartDataLink>()
        {
            new SankeyChartDataLink() { SourceId = "Female", TargetId = "Tablet", Value = 12 },
            new SankeyChartDataLink() { SourceId = "Female", TargetId = "Mobile", Value = 14 },
            new SankeyChartDataLink() { SourceId = "Female", TargetId = "Desktop", Value = 32 },
            new SankeyChartDataLink() { SourceId = "Male", TargetId = "Mobile", Value = 26 },
            new SankeyChartDataLink() { SourceId = "Male", TargetId = "Desktop", Value = 16 },
            new SankeyChartDataLink() { SourceId = "Tablet", TargetId = "< 18", Value = 4 },
            new SankeyChartDataLink() { SourceId = "Tablet", TargetId = "> 40", Value = 8 },
            new SankeyChartDataLink() { SourceId = "Mobile", TargetId = "< 18", Value = 4 },
            new SankeyChartDataLink() { SourceId = "Mobile", TargetId = "18-26", Value = 24 },
            new SankeyChartDataLink() { SourceId = "Mobile", TargetId = "27-40", Value = 10 },
            new SankeyChartDataLink() { SourceId = "Mobile", TargetId = "> 40", Value = 2 },
            new SankeyChartDataLink() { SourceId = "Desktop", TargetId = "18-26", Value = 11 },
            new SankeyChartDataLink() { SourceId = "Desktop", TargetId = "27-40", Value = 28 },
            new SankeyChartDataLink() { SourceId = "Desktop", TargetId = "> 40", Value = 9 }
        };
    }
}

OnAfterRenderAsync(Boolean)

Declaration
protected override Task OnAfterRenderAsync(bool firstRender)
Parameters
Type Name Description
System.Boolean firstRender
Returns
Type
System.Threading.Tasks.Task
Overrides

OnInitialized()

Declaration
protected override void OnInitialized()

OnSankeyResize(String)

Declaration
public void OnSankeyResize(string size)
Parameters
Type Name Description
System.String size

PrintAsync(ElementReference)

Asynchronously prints the specified element referenced by the optional parameter. If no element reference is provided, the chart will print.

Declaration
public Task PrintAsync(ElementReference elementRef = null)
Parameters
Type Name Description
Microsoft.AspNetCore.Components.ElementReference elementRef

Optional reference to the element to be printed. If not provided, the chart is printed.
Returns
Type Description
System.Threading.Tasks.Task

A task representing the asynchronous printing operation.
Examples
<SfSankeyChart @ref="sankeychartObj" Width="600px" Height="400px" DataSource="@SankeyData">
    <SankeyChartNodes Width="30" Alignment="SankeyNodeAlign.Left" OffsetX="10" OffsetY="10" Padding="10">
    </SankeyChartNodes>
    <SankeyChartLinks Color="blue" ColorType="ColorType.Static" HighlightOpacity="1" InactiveOpacity="0.3" Opacity="0.7"> </SankeyChartLinks>
</SfSankeyChart>
<button @onclick="PrintSankeyChart">PrintSankeyChart</button>
@code {
   SfSankeyChart sankeychartObj;

    public SankeyChartData SankeyData = new SankeyChartData()
    {
        Nodes = new List<SankeyChartDataNode>(),
        Links = new List<SankeyChartDataLink>()
    };}
    public async Task PrintSankeyChart()
    {
       await sankeychartObj.PrintAsync();
    }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        SankeyData.Nodes = new List<SankeyChartDataNode>()
        {
            new SankeyChartDataNode() { Id = "Female", Label = new SankeyChartDataLabel() { Text = "Female (58%)" } },
            new SankeyChartDataNode() { Id = "Male", Label = new SankeyChartDataLabel() { Text = "Male (42%)" } },
            new SankeyChartDataNode() { Id = "Tablet", Label = new SankeyChartDataLabel() { Text = "Tablet (12%)" } },
            new SankeyChartDataNode() { Id = "Mobile", Label = new SankeyChartDataLabel() { Text = "Mobile (40%)" } },
            new SankeyChartDataNode() { Id = "Desktop", Label = new SankeyChartDataLabel() { Text = "Desktop (48%)" } },
            new SankeyChartDataNode() { Id = "< 18", Label = new SankeyChartDataLabel() { Text = "< 18 years (8%)" } },
            new SankeyChartDataNode() { Id = "18-26", Label = new SankeyChartDataLabel() { Text = "18-26 years (35%)" } },
            new SankeyChartDataNode() { Id = "27-40", Label = new SankeyChartDataLabel() { Text = "27-40 years (38%)" } },
            new SankeyChartDataNode() { Id = "> 40", Label = new SankeyChartDataLabel() { Text = "> 40 years (19%)" } }
        };
        SankeyData.Links = new List<SankeyChartDataLink>()
        {
            new SankeyChartDataLink() { SourceId = "Female", TargetId = "Tablet", Value = 12 },
            new SankeyChartDataLink() { SourceId = "Female", TargetId = "Mobile", Value = 14 },
            new SankeyChartDataLink() { SourceId = "Female", TargetId = "Desktop", Value = 32 },
            new SankeyChartDataLink() { SourceId = "Male", TargetId = "Mobile", Value = 26 },
            new SankeyChartDataLink() { SourceId = "Male", TargetId = "Desktop", Value = 16 },
            new SankeyChartDataLink() { SourceId = "Tablet", TargetId = "< 18", Value = 4 },
            new SankeyChartDataLink() { SourceId = "Tablet", TargetId = "> 40", Value = 8 },
            new SankeyChartDataLink() { SourceId = "Mobile", TargetId = "< 18", Value = 4 },
            new SankeyChartDataLink() { SourceId = "Mobile", TargetId = "18-26", Value = 24 },
            new SankeyChartDataLink() { SourceId = "Mobile", TargetId = "27-40", Value = 10 },
            new SankeyChartDataLink() { SourceId = "Mobile", TargetId = "> 40", Value = 2 },
            new SankeyChartDataLink() { SourceId = "Desktop", TargetId = "18-26", Value = 11 },
            new SankeyChartDataLink() { SourceId = "Desktop", TargetId = "27-40", Value = 28 },
            new SankeyChartDataLink() { SourceId = "Desktop", TargetId = "> 40", Value = 9 }
        };
    }
}

RefreshAsync()

The method is used to rerender the SfSankey component.

Declaration
public Task RefreshAsync()
Returns
Type
System.Threading.Tasks.Task
Examples
<SfSankeyChart @ref="sankeychartObj" Width="600px" Height="400px" DataSource="@SankeyData">
    <SankeyChartNodes Width="30" Alignment="SankeyNodeAlign.Left" OffsetX="10" OffsetY="10" Padding="10">
    </SankeyChartNodes>
    <SankeyChartLinks Color="blue" ColorType="ColorType.Static" HighlightOpacity="1" InactiveOpacity="0.3" Opacity="0.7"> </SankeyChartLinks>
</SfSankeyChart>
<button @onclick="RefreshSankeyChart">RefreshSankeyChart</button>
@code {
   SfSankeyChart sankeychartObj;

    public SankeyChartData SankeyData = new SankeyChartData()
    {
        Nodes = new List<SankeyChartDataNode>(),
        Links = new List<SankeyChartDataLink>()
    };
    public async Task RefreshSankeyChart()
    {
       await sankeychartObj.RefreshAsync();
    }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        SankeyData.Nodes = new List<SankeyChartDataNode>()
        {
            new SankeyChartDataNode() { Id = "Female", Label = new SankeyChartDataLabel() { Text = "Female (58%)" } },
            new SankeyChartDataNode() { Id = "Male", Label = new SankeyChartDataLabel() { Text = "Male (42%)" } },
            new SankeyChartDataNode() { Id = "Tablet", Label = new SankeyChartDataLabel() { Text = "Tablet (12%)" } },
            new SankeyChartDataNode() { Id = "Mobile", Label = new SankeyChartDataLabel() { Text = "Mobile (40%)" } },
            new SankeyChartDataNode() { Id = "Desktop", Label = new SankeyChartDataLabel() { Text = "Desktop (48%)" } },
            new SankeyChartDataNode() { Id = "< 18", Label = new SankeyChartDataLabel() { Text = "< 18 years (8%)" } },
            new SankeyChartDataNode() { Id = "18-26", Label = new SankeyChartDataLabel() { Text = "18-26 years (35%)" } },
            new SankeyChartDataNode() { Id = "27-40", Label = new SankeyChartDataLabel() { Text = "27-40 years (38%)" } },
            new SankeyChartDataNode() { Id = "> 40", Label = new SankeyChartDataLabel() { Text = "> 40 years (19%)" } }
        };
        SankeyData.Links = new List<SankeyChartDataLink>()
        {
            new SankeyChartDataLink() { SourceId = "Female", TargetId = "Tablet", Value = 12 },
            new SankeyChartDataLink() { SourceId = "Female", TargetId = "Mobile", Value = 14 },
            new SankeyChartDataLink() { SourceId = "Female", TargetId = "Desktop", Value = 32 },
            new SankeyChartDataLink() { SourceId = "Male", TargetId = "Mobile", Value = 26 },
            new SankeyChartDataLink() { SourceId = "Male", TargetId = "Desktop", Value = 16 },
            new SankeyChartDataLink() { SourceId = "Tablet", TargetId = "< 18", Value = 4 },
            new SankeyChartDataLink() { SourceId = "Tablet", TargetId = "> 40", Value = 8 },
            new SankeyChartDataLink() { SourceId = "Mobile", TargetId = "< 18", Value = 4 },
            new SankeyChartDataLink() { SourceId = "Mobile", TargetId = "18-26", Value = 24 },
            new SankeyChartDataLink() { SourceId = "Mobile", TargetId = "27-40", Value = 10 },
            new SankeyChartDataLink() { SourceId = "Mobile", TargetId = "> 40", Value = 2 },
            new SankeyChartDataLink() { SourceId = "Desktop", TargetId = "18-26", Value = 11 },
            new SankeyChartDataLink() { SourceId = "Desktop", TargetId = "27-40", Value = 28 },
            new SankeyChartDataLink() { SourceId = "Desktop", TargetId = "> 40", Value = 9 }
        };
    }
}

UpdateComponent<T>(String, T)

Declaration
public void UpdateComponent<T>(string componentName, T component)
Parameters
Type Name Description
System.String componentName
T component
Type Parameters
Name
T

Implements

Microsoft.AspNetCore.Components.IHandleEvent