ToolTip in ASP.NET CORE Sankey Chart component

23 Mar 202620 minutes to read

The Sankey Chart provides tooltips that surface contextual details for hovered elements without cluttering the diagram. Tooltips display additional information when users hover over nodes or links in the Sankey Chart. You can enable and customize tooltips using the Tooltip property.

This guide outlines how to enable and customize tooltips in the ASP.NET Core Sankey Chart.

Tooltip Settings Properties

The following table lists the main tooltip configuration properties:

Property Type Default Description
enable boolean true Enables or disables the tooltip display.
fill string null Background fill color of the tooltip.
opacity number 0.75 Opacity of the tooltip container (0 to 1).
textStyle object null Text styling for the tooltip content.
nodeFormat string ‘$name : $value’ Format string for node tooltips.
linkFormat string ‘$start.name $start.value → $target.name $target.value’ Format string for link tooltips.
enableAnimation boolean true Toggles tooltip animation.
duration number 300 Animation duration in milliseconds.
fadeOutDuration number 1000 Fade-out duration in milliseconds.
fadeOutMode string ‘Move’ Fade-out animation mode (‘Move’, ‘Fade’, ‘Delay’).

Basic Tooltip Configuration

Enable tooltips with default formatting:

<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"></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();
}

Customizing Tooltip Appearance

Adjust tooltip appearance and behavior using tooltip configuration properties:

  • Enable: Shows or hides tooltips.
  • Fill: Sets background color.
  • Opacity: Controls transparency (0 to 1). The default value is 0.75.
  • TextStyle: Configures font size, family, weight, and color for the tooltip text.
  • EnableAnimation: Toggles animation. Default: true.
  • Duration: Animation duration in milliseconds. The default value is 300.
  • FadeOutDuration: Fade-out duration in milliseconds. The default value is 1000.

Example 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" fill="@ViewBag.TooltipFill">
        <e-sankeytooltipsettings-textstyle
            fontFamily="@ViewBag.TooltipFontFamily"
            fontStyle="@ViewBag.TooltipFontStyle"
            fontWeight="@ViewBag.TooltipFontWeight"
            fontSize="@ViewBag.TooltipFontSize"
            color="@ViewBag.TooltipColor">
        </e-sankeytooltipsettings-textstyle>
    </e-sankey-tooltipsettings>
    <e-sankey-legendsettings visible="true"></e-sankey-legendsettings>
</ejs-sankey>
public ActionResult Index()
{
    List<SankeyNode> nodes = new List<SankeyNode>
    {
        new SankeyNode { Id = "Agricultural Waste" },
        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;
    ViewBag.TooltipFontFamily = "Arial";
    ViewBag.TooltipFontStyle = "normal";
    ViewBag.TooltipFontWeight = "500";
    ViewBag.TooltipFontSize = "14px";
    ViewBag.TooltipColor = "#000";
    ViewBag.TooltipFill = "#F3F3F3";

    return View();
}

Format Strings

Format strings provide a simple way to customize tooltip content without requiring custom templates.

Node Tooltip Format

Format string placeholders for node tooltips:

  • $name - Node name/label
  • $value - Node value (sum of incoming links)

Format string placeholders for link tooltips:

  • $start.name - Source node name
  • $start.value - Source node value
  • $target.name - Target node name
  • $target.value - Target node value
  • $value - Link value

Example with custom format strings:

<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"></e-sankey-legendsettings>
</ejs-sankey>


<script>
    document.addEventListener("DOMContentLoaded", function () {
        var sankey = document.getElementById("sankey-container").ej2_instances[0];
        sankey.tooltip.nodeTemplate = "${name}: ${value} TBtu"
        sankey.tooltip.linkTemplate = "${start.name}: ${start.out} TBtu → ${target.name}: ${target.in} TBtu"
    });
</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 Tooltip Configuration

Tooltip Rendering Event

Use the TooltipRendering event to customize tooltip content dynamically and enable custom logic based on specific conditions:

<ejs-sankey id="sankey-container" width="90%" height="450px" tooltipRendering="onSankeyTooltipRendering">
    <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 onSankeyTooltipRendering(args) {
        if (args.text === 'link') {
            args.text = `Flow: ${args.link.sourceId} → ${args.link.targetId} (${args.link.value})`;
        } else if (args.text) {
            args.text = `Node: ${args.text}`;
        }
    }
</script>
public ActionResult Index()
{
    List<SankeyNode> nodes = new List<SankeyNode>
    {
        new SankeyNode { Id = "Agricultural Waste" },
        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 = 124.729 },
        new SankeyLink { SourceId = "Bio-conversion",     TargetId = "Liquid Biofuel", Value = 0.597 },
        new SankeyLink { SourceId = "Bio-conversion",     TargetId = "Electricity",    Value = 26.862 },
        new SankeyLink { SourceId = "Bio-conversion",     TargetId = "Heat",           Value = 280.845 }
    };

    ViewBag.SankeyNodes = 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" }
    };

    ViewBag.SankeyLinks = 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 }
    };

    return View();
}

Disabling Tooltips

To disable tooltips, set the Enable property to false:

const tooltip = { enable: false };

Key Considerations

  • Keep Text Concise: Keep tooltip text concise and readable.
  • Ensure Contrast: Ensure sufficient contrast for tooltip text and background.
  • Use Format Strings: Prefer NodeFormat and LinkFormat for simple content customization without requiring custom rendering logic.
  • Animation Tuning: Tune animation durations to balance responsiveness and polish.
  • Performance: Use format strings instead of complex rendering logic for better performance.
  • Relevant Information: Show only relevant and helpful information.
  • Consistent Styling: Maintain consistent tooltip styling across your application.