Class SankeyLinkSettings

Represents the link settings in the Sankey.

Inheritance
object
ComponentBase
OwningComponentBase
SfOwningComponentBase
SankeyComponentBase
SankeyLinkSettings
Implements
Inherited Members
Namespace: Syncfusion.Blazor.Sankey
Assembly: Syncfusion.Blazor.dll
Syntax
public class SankeyLinkSettings : SankeyComponentBase, IComponent, IHandleEvent, IHandleAfterRender, IDisposable
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

SankeyLinkSettings()

Declaration
public SankeyLinkSettings()

Properties

Color

Gets or sets the color of the links in the Sankey chart.

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

A string value specifying the color of the links. This value can be defined in hex or rgba format. The default value is null.
Remarks

If not specified, the links will use the default color of the chart.

ColorType

Gets or sets the type of color used for the links.

Declaration
[Parameter]
public SankeyColorType? ColorType { get; set; }
Property Value
Type Description
SankeyColorType?

A value from the ColorType enum that specifies how the color is applied to the links. The default value is Blend.
Remarks

The available options are Source, Target, and Blend.

HighlightOpacity

Gets or sets the highlight opacity of the links when they are hovered over.

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

A double value between 0.0 (fully transparent) and 1.0 (fully opaque) representing the highlight opacity. The default value is 0.8.
Remarks

This property is useful for improving user experience by making the links more visible when hovered over.

InactiveOpacity

Gets or sets the opacity of the links when they are inactive.

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

A double value between 0.0 (fully transparent) and 1.0 (fully opaque) representing the inactive opacity of the links. The default value is 0.2.
Remarks

This can help visually distinguish inactive links from active ones in the chart.

Opacity

Gets or sets the opacity of the links.

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

A double value between 0.0 (fully transparent) and 1.0 (fully opaque) representing the opacity of the links. The default value is 0.8.
Remarks

Adjusting this property affects the visibility of the links. A value of 0.0 will make the links invisible.

Implements