Legend in ASP.NET Core Sankey Chart component

A legend provides a visual key that helps users understand the categories and meanings represented by nodes in the Sankey Chart. The Sankey Chart provides comprehensive legend configuration options including positioning, styling, customization, and interactive behaviors. You can enable and customize legend using the Legend property.

This guide covers legend configuration, positioning strategies, customization options, and dynamic legend rendering events.

Legend Settings Properties

The LegendSettings property provides comprehensive options to configure legend appearance, behavior, and positioning. The following properties are commonly used:

Legend Configuration Properties

Property Type Default Description
visible boolean true Shows or hides the legend.
position string ‘Auto’ Position of the legend (Auto, Top, Bottom, Left, Right, Custom).
width string null Width of the legend container.
height string null Height of the legend container.
shapeWidth number 10 Width of the legend shape (icon).
shapeHeight number 10 Height of the legend shape (icon).
padding number 8 Padding around the legend container.
itemPadding number null Padding between legend items.
shapePadding number 8 Padding between the legend shape and its text.
background string ‘transparent’ Background color of the legend.
opacity number 1 Opacity of the legend container (0 to 1).
title string null Title text for the legend.
enableHighlight boolean true Enables highlighting of related nodes/links when legend item is clicked.
isInversed boolean false Inverts the legend layout.

Enable the legend and configure its basic properties such as visibility, position, and sizing. By default, the legend is automatically positioned based on available space.

Basic Legend Configuration

Here is an example of enabling and customizing the legend:

<ejs-sankey id="sankey-container" width="90%" height="450px">
    <e-sankey-nodes>
        @foreach (var node in ViewBag.SankeyNodes)
        {
            <e-sankey-node id="@node.Id"></e-sankey-node>
        }
    </e-sankey-nodes>
    <e-sankey-links>
        @foreach (var link in ViewBag.SankeyLinks)
        {
            <e-sankey-link sourceId="@link.SourceId" targetId="@link.TargetId" value="@link.Value"></e-sankey-link>
        }
    </e-sankey-links>
    <e-sankey-tooltipsettings enable="true"></e-sankey-tooltipsettings>
    <e-sankey-legendsettings visible="true" position="Right"></e-sankey-legendsettings>
</ejs-sankey>
public ActionResult Index()
{
    List<SankeyNode> nodes = new List<SankeyNode>
    {
        new SankeyNode { Id = "Agricultural Waste" },
        new SankeyNode { Id = "Biomass Residues" },
        new SankeyNode { Id = "Bio-conversion" },
        new SankeyNode { Id = "Liquid Biofuel" },
        new SankeyNode { Id = "Electricity" },
        new SankeyNode { Id = "Heat" }
    };

    List<SankeyLink> links = new List<SankeyLink>
    {
        new SankeyLink { SourceId = "Agricultural Waste", TargetId = "Bio-conversion", Value = 84.152 },
        new SankeyLink { SourceId = "Biomass Residues",   TargetId = "Bio-conversion", Value = 24.152 },
        new SankeyLink { SourceId = "Bio-conversion",     TargetId = "Liquid Biofuel", Value = 10.597 },
        new SankeyLink { SourceId = "Bio-conversion",     TargetId = "Electricity",    Value = 36.862 },
        new SankeyLink { SourceId = "Bio-conversion",     TargetId = "Heat",           Value = 60.845 }
    };

    ViewBag.SankeyNodes = nodes;
    ViewBag.SankeyLinks = links;

    return View();
}

Legend Position

Control the legend position using the Position property with the following options:

  • ‘Top’: Legend appears above the Sankey Chart
  • ‘Bottom’: Legend appears below the Sankey Chart
  • ‘Left’: Legend appears to the left of the chart
  • ‘Right’: Legend appears to the right of the chart (default for most cases)
  • ‘Auto’: Automatically positions the legend based on available space
  • ‘Custom’: Allows you to specify custom coordinates using the Location property
<ejs-sankey id="sankey-container" width="90%" height="450px">
    <e-sankey-nodes>
        @foreach (var node in ViewBag.SankeyNodes)
        {
            <e-sankey-node id="@node.Id"></e-sankey-node>
        }
    </e-sankey-nodes>
    <e-sankey-links>
        @foreach (var link in ViewBag.SankeyLinks)
        {
            <e-sankey-link sourceId="@link.SourceId" targetId="@link.TargetId" value="@link.Value"></e-sankey-link>
        }
    </e-sankey-links>
    <e-sankey-tooltipsettings enable="true"></e-sankey-tooltipsettings>
    <e-sankey-legendsettings visible="true" position="Bottom"></e-sankey-legendsettings>
</ejs-sankey>
public ActionResult Index()
{
    List<SankeyNode> nodes = new List<SankeyNode>
    {
        new SankeyNode { Id = "Agricultural Waste" },
        new SankeyNode { Id = "Biomass Residues" },
        new SankeyNode { Id = "Bio-conversion" },
        new SankeyNode { Id = "Liquid Biofuel" },
        new SankeyNode { Id = "Electricity" },
        new SankeyNode { Id = "Heat" }
    };

    List<SankeyLink> links = new List<SankeyLink>
    {
        new SankeyLink { SourceId = "Agricultural Waste", TargetId = "Bio-conversion", Value = 84.152 },
        new SankeyLink { SourceId = "Biomass Residues",   TargetId = "Bio-conversion", Value = 24.152 },
        new SankeyLink { SourceId = "Bio-conversion",     TargetId = "Liquid Biofuel", Value = 10.597 },
        new SankeyLink { SourceId = "Bio-conversion",     TargetId = "Electricity",    Value = 36.862 },
        new SankeyLink { SourceId = "Bio-conversion",     TargetId = "Heat",           Value = 60.845 }
    };

    ViewBag.SankeyNodes = nodes;
    ViewBag.SankeyLinks = links;

    return View();
}

Customize the legend appearance with properties like background color, opacity, shape sizing, padding, and interactive highlighting. The following example demonstrates comprehensive legend styling:

Customized Legend

Here is an example with comprehensive legend customization:

<ejs-sankey id="sankey-container" width="90%" height="450px">
    <e-sankey-nodes>
        @foreach (var node in ViewBag.SankeyNodes)
        {
            <e-sankey-node id="@node.Id"></e-sankey-node>
        }
    </e-sankey-nodes>
    <e-sankey-links>
        @foreach (var link in ViewBag.SankeyLinks)
        {
            <e-sankey-link sourceId="@link.SourceId" targetId="@link.TargetId" value="@link.Value"></e-sankey-link>
        }
    </e-sankey-links>
    <e-sankey-tooltipsettings enable="true"></e-sankey-tooltipsettings>
    <e-sankey-legendsettings
        visible="true"
        position="Right"
        background="#f5f5f5"
        itemPadding="12">
        <e-sankeylegendsettings-border width="2" color="#333"></e-sankeylegendsettings-border>
        <e-sankeylegendsettings-textstyle
            fontFamily="Segoe UI"
            fontStyle="Normal"
            fontWeight="500"
            size="13px">
        </e-sankeylegendsettings-textstyle>
    </e-sankey-legendsettings>
</ejs-sankey>
public ActionResult Index()
{
    List<SankeyNode> nodes = new List<SankeyNode>
    {
        new SankeyNode { Id = "Agricultural Waste" },
        new SankeyNode { Id = "Biomass Residues" },
        new SankeyNode { Id = "Bio-conversion" },
        new SankeyNode { Id = "Liquid Biofuel" },
        new SankeyNode { Id = "Electricity" },
        new SankeyNode { Id = "Heat" }
    };

    List<SankeyLink> links = new List<SankeyLink>
    {
        new SankeyLink { SourceId = "Agricultural Waste", TargetId = "Bio-conversion", Value = 84.152 },
        new SankeyLink { SourceId = "Biomass Residues",   TargetId = "Bio-conversion", Value = 24.152 },
        new SankeyLink { SourceId = "Bio-conversion",     TargetId = "Liquid Biofuel", Value = 10.597 },
        new SankeyLink { SourceId = "Bio-conversion",     TargetId = "Electricity",    Value = 36.862 },
        new SankeyLink { SourceId = "Bio-conversion",     TargetId = "Heat",           Value = 60.845 }
    };

    ViewBag.SankeyNodes = nodes;
    ViewBag.SankeyLinks = links;

    return View();
}

Custom Legend Position

Position the legend at a specific location using the Custom position setting. When using Custom position, specify the exact X and Y coordinates where the legend should appear. This provides precise control over legend placement:

<ejs-sankey id="sankey-container" width="90%" height="450px" load="onSankeyLoad">
    <e-sankey-nodes>
        @foreach (var node in ViewBag.SankeyNodes)
        {
            <e-sankey-node id="@node.Id"></e-sankey-node>
        }
    </e-sankey-nodes>
    <e-sankey-links>
        @foreach (var link in ViewBag.SankeyLinks)
        {
            <e-sankey-link sourceId="@link.SourceId" targetId="@link.TargetId" value="@link.Value"></e-sankey-link>
        }
    </e-sankey-links>
    <e-sankey-tooltipsettings enable="true"></e-sankey-tooltipsettings>
    <e-sankey-legendsettings visible="true"></e-sankey-legendsettings>
</ejs-sankey>

<script>
    function onSankeyLoad(args) {
        if (args && args.chart && args.chart.legendSettings) {
            args.chart.legendSettings.position = 'Custom';
            args.chart.legendSettings.location = { x: 120, y: 150 };
            args.chart.legendSettings.height = '150px';
            args.chart.legendSettings.width = '150px';
        }
    }
</script>
public ActionResult Index()
{
    List<SankeyNode> nodes = new List<SankeyNode>
    {
        new SankeyNode { Id = "Agricultural Waste" },
        new SankeyNode { Id = "Biomass Residues" },
        new SankeyNode { Id = "Bio-conversion" },
        new SankeyNode { Id = "Liquid Biofuel" },
        new SankeyNode { Id = "Electricity" },
        new SankeyNode { Id = "Heat" }
    };

    List<SankeyLink> links = new List<SankeyLink>
    {
        new SankeyLink { SourceId = "Agricultural Waste", TargetId = "Bio-conversion", Value = 84.152 },
        new SankeyLink { SourceId = "Biomass Residues",   TargetId = "Bio-conversion", Value = 24.152 },
        new SankeyLink { SourceId = "Bio-conversion",     TargetId = "Liquid Biofuel", Value = 10.597 },
        new SankeyLink { SourceId = "Bio-conversion",     TargetId = "Electricity",    Value = 36.862 },
        new SankeyLink { SourceId = "Bio-conversion",     TargetId = "Heat",           Value = 60.845 }
    };

    ViewBag.SankeyNodes = nodes;
    ViewBag.SankeyLinks = links;

    return View();
}

Advanced Legend Configuration

Dynamic Legend Customization

Use the LegendItemRendering event to customize individual legend items before they are rendered. This event is triggered for each legend item and allows you to apply conditional styling, modify colors, or change text based on data values:

<ejs-sankey id="sankey-container" width="90%" height="450px" legendItemRendering="onLegendItemRendering">
    <e-sankey-nodes>
        @foreach (var node in ViewBag.SankeyNodes)
        {
            <e-sankey-node id="@node.Id"></e-sankey-node>
        }
    </e-sankey-nodes>
    <e-sankey-links>
        @foreach (var link in ViewBag.SankeyLinks)
        {
            <e-sankey-link sourceId="@link.SourceId" targetId="@link.TargetId" value="@link.Value"></e-sankey-link>
        }
    </e-sankey-links>
    <e-sankey-tooltipsettings enable="true"></e-sankey-tooltipsettings>
    <e-sankey-legendsettings visible="true" position="Bottom"></e-sankey-legendsettings>
</ejs-sankey>

<script>
    function onLegendItemRendering(args) {
        args.fill = '#333';
    }
</script>
public ActionResult Index()
{
    List<SankeyNode> nodes = new List<SankeyNode>
    {
        new SankeyNode { Id = "Agricultural Waste" },
        new SankeyNode { Id = "Biomass Residues" },
        new SankeyNode { Id = "Bio-conversion" },
        new SankeyNode { Id = "Liquid Biofuel" },
        new SankeyNode { Id = "Electricity" },
        new SankeyNode { Id = "Heat" }
    };

    List<SankeyLink> links = new List<SankeyLink>
    {
        new SankeyLink { SourceId = "Agricultural Waste", TargetId = "Bio-conversion", Value = 84.152 },
        new SankeyLink { SourceId = "Biomass Residues",   TargetId = "Bio-conversion", Value = 24.152 },
        new SankeyLink { SourceId = "Bio-conversion",     TargetId = "Liquid Biofuel", Value = 10.597 },
        new SankeyLink { SourceId = "Bio-conversion",     TargetId = "Electricity",    Value = 36.862 },
        new SankeyLink { SourceId = "Bio-conversion",     TargetId = "Heat",           Value = 60.845 }
    };

    ViewBag.SankeyNodes = nodes;
    ViewBag.SankeyLinks = links;

    return View();
}