Sankey Legend

The Telerik Sankey Diagram for Blazor can show a legend, which is a visual guide with details about the nodes. This article explores how to customize the Sankey legend.

Basic Customization

To customize the legend in the Sankey chart, declare a <SankeyLegend> tag as a direct child of <TelerikSankey>. The <SankeyLegend> tag has the following parameters:

Parameter	Type and Default Value	Description
Align	SankeyLegendAlign enum (Start)	The alignment of the legend.
Background	string	The background color of the legend.
Height	double?	The height of the legend.
OffsetX	double?	The X offset of the legend. The offset is relative to the current position of the legend.
OffsetY	double?	The Y offset of the legend. The offset is relative to the current position of the legend.
Orientation	SankeyLegendOrientation enum (Horizontal)	The orientation of the legend.
Position	SankeyLegendPosition enum (Bottom)	The position of the legend.
Reverse	double?	Whether the legend items are reversed.
Spacing	double?	The spacing between the labels of the legend.
Visible	bool? (true)	Whether the legend is visible.
Width	double?	The width of the legend. Applies when Orientation="SankeyLegendOrientation.Horizontal".

Nested Customization Tags

The <SankeyLegend> tag exposes nested tags for further customization of the separate legend elements. The structure of the nested tags is <SankeyLegend*Specifics*>, where the specifics can be:

• Border
• Item
• Labels - exposes additional nested options. The structure of the nested tags is <SankeyLegendLabels*Specifics*>, where the specifics can be:
  • Margin
  • Padding
• Margin
• Padding
• Title - exposes additional nested options. The structure of the nested tags is <SankeyLegendTitle*Specifics*>, where the specifics can be:
  • Border
  • Margin
  • Padding

Use the IntelliSense to explore the nested tags and their properties.

Example

Customizing the Sankey legend by using nested tag settings

<TelerikSankey Data="@Data"
               DisableAutoLayout="true"
               Height="400px">
    <SankeyLinks ColorType="@SankeyLinksColorType.Source" />
    <SankeyLegend Position="@SankeyLegendPosition.Top" Background="rgba(255, 99, 88, 0.1)">
        <SankeyLegendTitle Text="Device usage by age groups" Font="bold 17px sans-serif">
            <SankeyLegendTitlePadding Bottom="20"></SankeyLegendTitlePadding>
        </SankeyLegendTitle>
        <SankeyLegendItem AreaOpacity="0.7" />
        <SankeyLegendMargin Bottom="20" />
        <SankeyLegendPadding Top="10" Bottom="10" />
    </SankeyLegend>
</TelerikSankey>

@code {
    private SankeyData? Data { get; set; }

    protected override void OnInitialized()
    {
        var sourceNodes = 3;
        var destinationNodes = 3;

        Data = new SankeyData()
            {
                Nodes = new SankeyDataNodes(),
                Links = new SankeyDataLinks()
            };

        for (int i = 1; i <= sourceNodes + destinationNodes; i++)
        {
            var nodeDescriptor = i <= sourceNodes ? "Source" : "Destination";
            Data.Nodes.Add(new SankeyDataNode() { Id = i, Label = new SankeyDataNodeLabel() { Text = $"{nodeDescriptor} {i}" } });
        }

        for (int i = 1; i <= sourceNodes; i++)
        {
            for (int j = sourceNodes + 1; j <= sourceNodes + destinationNodes; j++)
            {
                Data.Links.Add(new SankeyDataLink()
                    {
                        SourceId = i,
                        TargetId = j,
                        Value = Random.Shared.Next(5, 30)
                    });
            }
        }
    }
}

See Also

• Live Demo: Sankey Diagram Configuration
• Sankey Links
• Sankey Nodes
• Sankey Labels
• Sankey Tooltip
• Sankey Title