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

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(Boolean)

SfBaseComponent.GetEffectivePlatform()

SfBaseComponent.GetMainComponentPlatform()

SfBaseComponent.IsMainLicenseComponent()

SfBaseComponent.LicenseContext

SfBaseComponent.OnAfterRenderAsync(Boolean)

SfBaseComponent.OnInitializedAsync()

SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)

SfBaseComponent.ValidateLicense()

Namespace: Syncfusion.Blazor.Sankey

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfSankey : SfBaseComponent, 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 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.

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.

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.

Links

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

Declaration

public List<SankeyDataLink> Links { get; set; }

Property Value

Type	Description
System.Collections.Generic.List<SankeyDataLink>	Accepts the collection of SankeyDataLink objects. The default value is null.

Remarks

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

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.

Nodes

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

Declaration

public List<SankeyDataNode> Nodes { get; set; }

Property Value

Type	Description
System.Collections.Generic.List<SankeyDataNode>	Accepts the collection of SankeyDataNode objects. The default value is null.

Orientation

Get or set the orientation of the SfSankey component.

Declaration

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 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

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

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

Declaration

public Task ExportAsync(SankeyExportType type, string fileName, Nullable<PdfPageOrientation> orientation = null, bool allowDownload = true, bool isBase64 = false)

Parameters

Type	Name	Description
SankeyExportType	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 }
        };
    }
}

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

Implements

Microsoft.AspNetCore.Components.IHandleEvent