Class SankeyLinkContext

Gets the context information for the Sankey chart Link tooltip.

Inheritance

System.Object

SankeyLinkContext

Namespace: Syncfusion.Blazor.Sankey

Assembly: Syncfusion.Blazor.dll

Syntax

public class SankeyLinkContext : Object

Examples

<SfSankey Width="600px" Height="400px" DataSource="@SankeyData"Title="Device Usage" SubTitle="-2023">
   <SankeyTitleStyle FontSize="16px" FontFamily="Roboto" FontWeight="800"></SankeyTitleStyle>
   <SankeySubtitleStyle FontSize="10px" FontFamily="Roboto" FontWeight="400"></SankeySubtitleStyle>
    <SankeyNodes Width="30" Alignment="SankeyNodeAlign.Left" Offset="10" Padding="10">
    </SankeyNodes>
    <SankeyLinks Color="blue" ColorType="ColorType.Static" HighlightOpacity="1" InactiveOpacity="0.3" Opacity="0.7"> </SankeyLinks>
	<SankeyLabels Visible="true" FontSize="12" Color="black" FontFamily="Arial" FontWeight="400" Padding="8"></SankeyLabels>
    <SankeyMargin Left="10" Right="10" Top="10" Bottom="10"></SankeyMargin>
    <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.NodeData.Label</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.LinkData.Value</p>
                   </div>
               }
           }
       </SankeyLinkTemplate>
   </SankeyTooltipSettings>
</SfSankey>
@code {

    public SankeyData SankeyData = new SankeyData()
    {
        Nodes = new List<SankeyDataNode>(),
        Links = new List<SankeyDataLink>()
    };

    protected override void OnInitialized()
    {
        base.OnInitialized();
        SankeyData.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%)" } }
        };
        SankeyData.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

SankeyLinkContext()

Declaration

public SankeyLinkContext()

Properties

Link

Gets the data of the link of the tooltip template.

Declaration

public SankeyDataLink Link { get; }

Property Value

Type	Description
SankeyDataLink	The value is instance of SankeyDataLink.

Remarks

Use this property to get the data of the link in the tooltip template and customize the tooltip content. This is read-only property.