Class SankeyNodeSettings

Represents a node component in the SfSankey.

Inheritance

System.Object

SankeyComponentBase

SankeyNodeSettings

Namespace: Syncfusion.Blazor.Sankey

Assembly: Syncfusion.Blazor.dll

Syntax

public class SankeyNodeSettings : SankeyComponentBase

Examples

<SfSankey Width="600px" Height="400px" Nodes=@Nodes Links=@Links Title="Device Usage" SubTitle="-2023">
    <SankeyNodeSettings Width="30" Alignment="SankeyNodeAlign.Left" Offset="10" Padding="10"></SankeyNodeSettings>
    <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>
</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

SankeyNodeSettings()

Declaration

public SankeyNodeSettings()

Properties

Alignment

Gets or sets the alignment of the node within the chart.

Declaration

public SankeyNodeAlign Alignment { get; set; }

Property Value

Type	Description
SankeyNodeAlign	A value from the SankeyNodeAlign enum that specifies the alignment of the node. The default is Stretch. The available options are: StretchRenders the node to fill the available space. LeftRenders the node in the left of the available space. TopRenders the node in the right of the available space.

Remarks

The Alignment property is used to align the node within the chart based on the Offset property.

Color

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

Declaration

public string Color { get; set; }

Property Value

Type	Description
System.String	A string value that specifies the color of the node. The value can be specified in hex or rgba format. The default value is null.

Remarks

If the Color property is not set, the node color will be automatically generated based on the Theme property.

Offset

Gets or sets the offset of the node based on the Alignment property.

Declaration

public double Offset { get; set; }

Property Value

Type	Description
System.Double	A double value that specifies the offset of the node. The default value is 0.

Remarks

Use this property to set the offset of the node. If the alignment is set to Left or Top, this property determines how far the node is positioned from its default location.

Opacity

Gets or sets the opacity level of the node.

Declaration

public double Opacity { get; set; }

Property Value

Type	Description
System.Double	A double value between 0.0 (fully transparent) and 1.0 (fully opaque). The default value is 1.0.

Remarks

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

Padding

Gets or sets the padding around the node.

Declaration

public double Padding { get; set; }

Property Value

Type	Description
System.Double	A double value that specifies the padding around the node. The default value is 10.

Remarks

Use this property to set the padding around the node to avoid overlapping with other nodes.

Width

Gets or sets the width of the node.

Declaration

public double Width { get; set; }

Property Value

Type	Description
System.Double	A double value representing the width of the node. The default value is 20.

Remarks

By using the Width property, you can set the width of the node.