menu

Blazor

  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class SankeyDataLink - Blazor API Reference | Syncfusion

    Show / Hide Table of Contents

    Class SankeyDataLink

    Represents the SfSankey component's Links type.

    Inheritance
    System.Object
    SankeyDataLink
    Namespace: Syncfusion.Blazor.Sankey
    Assembly: Syncfusion.Blazor.dll
    Syntax
    public class SankeyDataLink : Object
    Examples
    <SfSankeyChart 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>
    @code {
    
        public SankeyChartData SankeyData = new SankeyChartData()
        {
            Nodes = new List<SankeyChartDataNode>(),
            Links = new List<SankeyChartDataLink>()
        };
    
        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 }
            };
        }
    }

    Constructors

    SankeyDataLink()

    Declaration
    public SankeyDataLink()

    Properties

    Color

    Gets or sets the color of the link in the SfSankey.

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

    Accepts the string value that specifies the color of the link. The default value is null.

    Remarks

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

    ColorType

    Gets or sets the type of color to apply to the link.

    Declaration
    public Nullable<SankeyColorType> ColorType { get; set; }
    Property Value
    Type Description
    System.Nullable<SankeyColorType>

    Defines the type or format of the color being used. The default value is Blend. The available options are:

    • Source - The color of the link is based on the source node.
    • Target - The color of the link is based on the target node.
    • Blend - The color of the link is a blend of the source and target nodes.
    Remarks

    By changing the ColorType property, you can customize the appearance of the link based on the source, target, or a blend of both nodes.

    Opacity

    Gets or sets the opacity level of the link.

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

    A double value ranging from 0.0 (fully transparent) to 1.0 (fully opaque). The default is 0.4.

    Remarks

    Use the Opacity property to set the transparency level of the link in the SfSankey.

    SourceId

    Gets or sets the Id of the source node for the link.

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

    A string value that represents the unique identifier of the source node. The default value is null.

    Remarks

    This is a mandatory property that defines the source node for the link. The value should match the Id property of the source node.

    TargetId

    Gets or sets the Id of the target node for the link.

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

    A string value that represents the unique identifier of the target node. The default value is null.

    Remarks

    This is a mandatory property that defines the target node for the link. The value should match the Id property of the target node.

    Value

    Gets or sets the numerical value or weight of the link.

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

    A double value that defines the thickness or weight of the link, representing the flow between nodes. The default value is double.NaN.

    Remarks

    The Value property is a mandatory property that defines the weight or thickness of the link. The value should be a numerical value that represents the flow between the source and target nodes.

    Back to top Generated by DocFX
    Copyright © 2001 - 2025 Syncfusion Inc. All Rights Reserved