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
object
ComponentBase
OwningComponentBase
SfOwningComponentBase
SfBaseComponent
SfSankey
Implements
Inherited Members
Namespace: Syncfusion.Blazor.Sankey
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfSankey : SfBaseComponent, IComponent, IHandleAfterRender, IDisposable, IHandleEvent
Examples
<SfSankey Width="600px" Height="400px" Nodes=@Nodes Links=@Links Title="Device Usage" SubTitle="-2023">
    <SankeyTitleStyle FontSize="16px" FontFamily="Roboto" FontWeight="800"></SankeyTitleStyle>
    <SankeySubtitleStyle FontSize="10px" FontFamily="Roboto" FontWeight="400"></SankeySubtitleStyle>
    <SankeyNodeSettings Width="30" Alignment="SankeyNodeAlign.Left" Offset="10" Padding="10"></SankeyNodeSettings>
    <SankeyMargin Left="10" Right="10" Top="10" Bottom="10"></SankeyMargin>
    <SankeyLinkSettings Color="blue" ColorType="SankeyColorType.Source" HighlightOpacity="1" InactiveOpacity="0.3" Opacity="0.7">
    </SankeyLinkSettings>
    <SankeyLabelSettings Visible="true" FontSize="12" Color="black" FontFamily="Arial" FontWeight="400" Padding="8">
    </SankeyLabelSettings>
    <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 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 }
        };
    }
}
<SfSankey Width="600px" Height="400px" Nodes=@Nodes Links=@Links Title="Device Usage" SubTitle="-2023">
    <SankeyTitleStyle FontSize="16px" FontFamily="Roboto" FontWeight="800"></SankeyTitleStyle>
    <SankeySubtitleStyle FontSize="10px" FontFamily="Roboto" FontWeight="400"></SankeySubtitleStyle>
    <SankeyNodeSettings Width="30" Alignment="SankeyNodeAlign.Left" Offset="10" Padding="10"></SankeyNodeSettings>
    <SankeyMargin Left="10" Right="10" Top="10" Bottom="10"></SankeyMargin>
    <SankeyLinkSettings Color="blue" ColorType="SankeyColorType.Source" HighlightOpacity="1" InactiveOpacity="0.3" Opacity="0.7">
    </SankeyLinkSettings>
    <SankeyLabelSettings Visible="true" FontSize="12" Color="black" FontFamily="Arial" FontWeight="400" Padding="8">
    </SankeyLabelSettings>
    <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 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 }
        };
    }
}
<SfSankey Width="600px" Height="400px" Nodes=@Nodes Links=@Links Title="Device Usage" SubTitle="-2023">
    <SankeyTitleStyle FontSize="16px" FontFamily="Roboto" FontWeight="800"></SankeyTitleStyle>
    <SankeySubtitleStyle FontSize="10px" FontFamily="Roboto" FontWeight="400"></SankeySubtitleStyle>
    <SankeyNodeSettings Width="30" Alignment="SankeyNodeAlign.Left" Offset="10" Padding="10"></SankeyNodeSettings>
    <SankeyMargin Left="10" Right="10" Top="10" Bottom="10"></SankeyMargin>
    <SankeyLinkSettings Color="blue" ColorType="SankeyColorType.Source" HighlightOpacity="1" InactiveOpacity="0.3" Opacity="0.7">
    </SankeyLinkSettings>
    <SankeyLabelSettings Visible="true" FontSize="12" Color="black" FontFamily="Arial" FontWeight="400" Padding="8">
    </SankeyLabelSettings>
    <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 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 }
        };
    }
}
<SfSankey Width="600px" Height="400px" Nodes=@Nodes Links=@Links Title="Device Usage" SubTitle="-2023">
    <SankeyTitleStyle FontSize="16px" FontFamily="Roboto" FontWeight="800"></SankeyTitleStyle>
    <SankeySubtitleStyle FontSize="10px" FontFamily="Roboto" FontWeight="400"></SankeySubtitleStyle>
    <SankeyNodeSettings Width="30" Alignment="SankeyNodeAlign.Left" Offset="10" Padding="10"></SankeyNodeSettings>
    <SankeyMargin Left="10" Right="10" Top="10" Bottom="10"></SankeyMargin>
    <SankeyLinkSettings Color="blue" ColorType="SankeyColorType.Source" HighlightOpacity="1" InactiveOpacity="0.3" Opacity="0.7">
    </SankeyLinkSettings>
    <SankeyLabelSettings Visible="true" FontSize="12" Color="black" FontFamily="Arial" FontWeight="400" Padding="8">
    </SankeyLabelSettings>
    <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 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 }
        };
    }
}
<SfSankey Width="600px" Height="400px" Nodes=@Nodes Links=@Links Title="Device Usage" SubTitle="-2023">
    <SankeyTitleStyle FontSize="16px" FontFamily="Roboto" FontWeight="800"></SankeyTitleStyle>
    <SankeySubtitleStyle FontSize="10px" FontFamily="Roboto" FontWeight="400"></SankeySubtitleStyle>
    <SankeyNodeSettings Width="30" Alignment="SankeyNodeAlign.Left" Offset="10" Padding="10"></SankeyNodeSettings>
    <SankeyMargin Left="10" Right="10" Top="10" Bottom="10"></SankeyMargin>
    <SankeyLinkSettings Color="blue" ColorType="SankeyColorType.Source" HighlightOpacity="1" InactiveOpacity="0.3" Opacity="0.7">
    </SankeyLinkSettings>
    <SankeyLabelSettings Visible="true" FontSize="12" Color="black" FontFamily="Arial" FontWeight="400" Padding="8">
    </SankeyLabelSettings>
    <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 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 }
        };
    }
}

Constructors

SfSankey()

Declaration
public SfSankey()

Properties

AccessibilityDescription

Gets and sets the accessibility description for SankeyChart.

Declaration
[Parameter]
public string AccessibilityDescription { get; set; }
Property Value
Type Description
string

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

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

AnimationDelay

Gets or sets the delay of animation in milliseconds.

Declaration
[Parameter]
public double AnimationDelay { get; set; }
Property Value
Type Description
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
[Parameter]
public double AnimationDuration { get; set; }
Property Value
Type Description
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 SankeyChart.

Declaration
[Parameter]
public string BackgroundColor { get; set; }
Property Value
Type Description
string

A string value specifying the background color of the SankeyChart. The default background color is determined by the SankeyChart'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 SankeyChart.

Declaration
[Parameter]
public string BackgroundImage { get; set; }
Property Value
Type Description
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 SankeyChart. Specify the URL or path to the image file to be used as the background.

BorderColor

Gets or sets the border color of the SankeyChart.

Declaration
[Parameter]
public string BorderColor { get; set; }
Property Value
Type Description
string

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

Set this property to customize the border color of the SankeyChart 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
[Parameter]
public double BorderWidth { get; set; }
Property Value
Type Description
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 SankeyChart component.

Created

An event that is raised when the SankeyChart is created.

Declaration
[Parameter]
public Action Created { get; set; }
Property Value
Type Description
Action

Accepts an Action.
Remarks

You can access information about the created SankeyChart.

CssClass

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

Declaration
[Parameter]
public string CssClass { get; set; }
Property Value
Type Description
string

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

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

EnableAnimation

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

Declaration
[Parameter]
public bool EnableAnimation { get; set; }
Property Value
Type Description
bool

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

Use the EnableAnimation property to enable or disable animations for the SankeyChart. 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 SankeyChart component.

Declaration
[Parameter]
public bool EnableAutoLayout { get; set; }
Property Value
Type Description
bool

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

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

EnableRTL

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

Declaration
[Parameter]
public bool EnableRTL { get; set; }
Property Value
Type Description
bool

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 SankeyChart. 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 SankeyChart export operation is completed.

Declaration
[Parameter]
public Action<SankeyExportedEventArgs> ExportCompleted { get; set; }
Property Value
Type Description
Action<SankeyExportedEventArgs>

Accepts an Action with SankeyExportedEventArgs as the type parameter.
Remarks

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

Height

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

Declaration
[Parameter]
public string Height { get; set; }
Property Value
Type Description
string

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

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

ID

Gets or sets the ID for the SankeyChart component.

Declaration
[Parameter]
public string ID { get; set; }
Property Value
Type Description
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 SankeyChart 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 SankeyChart.

Declaration
[Parameter]
public Action<SankeyLabelRenderEventArgs> LabelRendering { get; set; }
Property Value
Type Description
Action<SankeyLabelRenderEventArgs>

Accepts an 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 SankeyChart.

Declaration
[Parameter]
public Action<SankeyLegendItemHoverEventArgs> LegendItemHover { get; set; }
Property Value
Type Description
Action<SankeyLegendItemHoverEventArgs>

Accepts an 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 SankeyChart.

LegendItemRendering

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

Declaration
[Parameter]
public Action<SankeyLegendRenderEventArgs> LegendItemRendering { get; set; }
Property Value
Type Description
Action<SankeyLegendRenderEventArgs>

Accepts an 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 SankeyChart is clicked.

Declaration
[Parameter]
public Action<SankeyLinkEventArgs> LinkClick { get; set; }
Property Value
Type Description
Action<SankeyLinkEventArgs>

Accepts an 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 SankeyChart component.

Declaration
[Parameter]
public double LinkCurvature { get; set; }
Property Value
Type Description
double

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

Using this property, you can set the curvature of the link in the SankeyChart 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 SankeyChart.

Declaration
[Parameter]
public Action<SankeyLinkEventArgs> LinkEnter { get; set; }
Property Value
Type Description
Action<SankeyLinkEventArgs>

Accepts an 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 SankeyChart.

Declaration
[Parameter]
public Action<SankeyLinkEventArgs> LinkLeave { get; set; }
Property Value
Type Description
Action<SankeyLinkEventArgs>

Accepts an 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 SankeyChart.

Declaration
[Parameter]
public Action<SankeyLinkRenderEventArgs> LinkRendering { get; set; }
Property Value
Type Description
Action<SankeyLinkRenderEventArgs>

Accepts an Action with SankeyLinkRenderEventArgs as the type parameter.
Remarks

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

Gets or sets the collection of SankeyDataLink objects to the SankeyChart.

Declaration
[Parameter]
public List<SankeyDataLink> Links { get; set; }
Property Value
Type Description
List<SankeyDataLink>

Accepts the collection of SankeyDataLink objects. The default value is null.

Use the Links property to define the links between the nodes in the SankeyChart.

NodeClick

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

Declaration
[Parameter]
public Action<SankeyNodeEventArgs> NodeClick { get; set; }
Property Value
Type Description
Action<SankeyNodeEventArgs>

Accepts an 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 SankeyChart.

Declaration
[Parameter]
public Action<SankeyNodeEventArgs> NodeEnter { get; set; }
Property Value
Type Description
Action<SankeyNodeEventArgs>

Accepts an 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 SankeyChart.

Declaration
[Parameter]
public Action<SankeyNodeEventArgs> NodeLeave { get; set; }
Property Value
Type Description
Action<SankeyNodeEventArgs>

Accepts an 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 SankeyChart.

Declaration
[Parameter]
public Action<SankeyNodeRenderEventArgs> NodeRendering { get; set; }
Property Value
Type Description
Action<SankeyNodeRenderEventArgs>

Accepts an Action with SankeyNodeRenderEventArgs as the type parameter.
Remarks

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

Nodes

Gets or sets the collection of SankeyDataNode objects to the SankeyChart.

Declaration
[Parameter]
public List<SankeyDataNode> Nodes { get; set; }
Property Value
Type Description
List<SankeyDataNode>

Accepts the collection of SankeyDataNode objects. The default value is null.

Orientation

Get or set the orientation of the SankeyChart component.

Declaration
[Parameter]
public SankeyOrientation Orientation { get; set; }
Property Value
Type Description
SankeyOrientation

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

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

PrintCompleted

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

Declaration
[Parameter]
public Action PrintCompleted { get; set; }
Property Value
Type
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 SankeyChart changes.

Declaration
[Parameter]
public Action<SankeySizeChangedEventArgs> SizeChanged { get; set; }
Property Value
Type Description
Action<SankeySizeChangedEventArgs>

Accepts an 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 SankeyChart component.

Declaration
[Parameter]
public string SubTitle { get; set; }
Property Value
Type Description
string

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

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

TabIndex

Gets and sets the tabIndex for SankeyChart element.

Declaration
[Parameter]
public double TabIndex { get; set; }
Property Value
Type Description
double

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

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

Theme

Gets or sets the theme for the SankeyChart.

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

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

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

Title

Gets or sets the title of the SankeyChart component.

Declaration
[Parameter]
public string Title { get; set; }
Property Value
Type Description
string

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

The Title property allows you to provide a descriptive title for the SankeyChart, 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 SankeyChart.

Declaration
[Parameter]
public Action<SankeyTooltipRenderEventArgs> TooltipRendering { get; set; }
Property Value
Type Description
Action<SankeyTooltipRenderEventArgs>

Accepts an 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 SankeyChart as a string.

Declaration
[Parameter]
public string Width { get; set; }
Property Value
Type Description
string

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

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

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
Type Name Description
RenderTreeBuilder __builder
Overrides

ExportAsync(SankeyExportType, string, PdfPageOrientation?, bool, bool)

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

Declaration
public Task ExportAsync(SankeyExportType type, string fileName, PdfPageOrientation? orientation = null, bool allowDownload = true, bool isBase64 = false)
Parameters
Type Name Description
SankeyExportType type

Specifies the export type for the rendered SankeyChart.
string fileName

Specifies the filename.
PdfPageOrientation? orientation

Specifies the portrait or landscape orientation of the page.
bool allowDownload

Specifies whether to download or not.
bool isBase64

Specify whether to obtain the SankeyChart image as a base64 string or not.
Returns
Type Description
Task

Export the SankeyChart 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 }
        };
    }
}

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 = default)
Parameters
Type Name Description
ElementReference elementRef

Optional reference to the element to be printed. If not provided, the chart is printed.
Returns
Type Description
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 SankeyChart component.

Declaration
public Task RefreshAsync()
Returns
Type
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 }
        };
    }
}

Implements