Events in ASP.NET Core Sankey Chart component

The Sankey Chart provides comprehensive events that allow you to customize behavior, respond to user interactions, and hook into the chart lifecycle. These events enable advanced customization scenarios including data transformation, analytics tracking, and dynamic UI updates.

This guide covers lifecycle events, rendering events, interaction events, and export/print events.

Event List

Event	Description
load	Triggers before the Sankey loads. Allows customization before rendering.
loaded	Triggers after the Sankey is fully loaded and rendered.
legendItemRendering	Triggers before a legend item is rendered. Allows customization of legend items.
labelRendering	Triggers before a label is rendered. Allows customization of label text and style.
nodeRendering	Triggers before a node is rendered. Allows customization of node appearance.
linkRendering	Triggers before a link is rendered. Allows customization of link appearance.
tooltipRendering	Triggers before a tooltip is rendered. Allows customization of tooltip content.
nodeClick	Triggers when a node is clicked.
nodeEnter	Triggers when the mouse enters a node area.
nodeLeave	Triggers when the mouse leaves a node area.
linkClick	Triggers when a link is clicked.
linkEnter	Triggers when the mouse enters a link area.
linkLeave	Triggers when the mouse leaves a link area.
sizeChanged	Triggers when the chart size changes.
beforeExport	Triggers before the export process starts.
afterExport	Triggers after the export process completes.
exportCompleted	Triggers when export is completed.
beforePrint	Triggers before the print process starts.

Lifecycle Events

Load Event

The Load event triggers before the Sankey Chart begins rendering. Use this event to customize configuration, apply themes, or prepare data before the chart loads:

CSHTML

<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) {
        console.log('Sankey chart is loading...', args);
    }
</script>

Load-event.cs

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

    return View();
}

Loaded Event

The Loaded event triggers after the Sankey Chart is completely rendered and ready for interaction. Use this event to initialize calculations, perform analytics, or trigger dependent components:

CSHTML

<ejs-sankey id="sankey-container" width="90%" height="450px" loaded="onSankeyLoaded">
    <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 onSankeyLoaded(args) {
        console.log('Sankey chart has loaded successfully', args);
    }
</script>

Loaded-event.cs

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

Interaction Events

Node Interaction Events

Handle node click and hover events to respond to user actions and provide interactive feedback:

CSHTML

<ejs-sankey id="sankey-container" width="90%" height="450px" nodeClick="onNodeClick" nodeEnter="onNodeEnter">
    <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 onNodeClick(args) {
        console.log('Node clicked:', args.node);
    }

    function onNodeEnter(args) {
        console.log('Node hovered:', args.node);
    }
</script>

Node-interaction-event.cs

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

Link Interaction Events

Handle link click and hover events:

CSHTML

<ejs-sankey id="sankey-container" width="90%" height="450px" linkClick="onLinkClick" linkEnter="onLinkEnter">
    <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 onLinkClick(args) {
        console.log('Link clicked:', args.link);
    }

    function onLinkEnter(args) {
        console.log('Link hovered:', args.link);
    }
</script>

Link-interaction-event.cs

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

Rendering Events

Use rendering events to customize elements dynamically based on data values, conditions, or business logic. This is the most powerful approach for data-driven styling.

Node Rendering Event

The NodeRendering event triggers before each node is rendered, allowing dynamic node customization:

CSHTML

<ejs-sankey id="sankey-container" width="90%" height="450px" nodeRendering="onNodeRendering">
    <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 onNodeRendering(args) {
        if (args && args.node && args.node.id === 'Agricultural Waste') {
            args.node.color = '#FF6B6B';
        } else if (args && args.node && args.node.id === 'Bio-conversion') {
            args.node.color = '#4ECDC4';
        }
    }
</script>

Node-rendering-event.cs

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

Link Rendering Event

The LinkRendering event triggers before each link is rendered, allowing dynamic link customization:

CSHTML

<ejs-sankey id="sankey-container" width="90%" height="450px" linkRendering="onLinkRendering">
    <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 onLinkRendering(args) {
        var linkObj = args.link || args.data || {};
        var value = linkObj.value;

        if (typeof value === 'number' ? value > 50 : false) {
            args.fill = '#FF6B6B';
        } else {
            args.fill = '#70AD47';
        }
    }
</script>

Link-rendering-event.cs

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

Label Rendering Event

The LabelRendering event triggers before each label is rendered, allowing dynamic label customization:

CSHTML

<ejs-sankey id="sankey-container" width="90%" height="450px" labelRendering="onSankeyLabelRendering">
    <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 onSankeyLabelRendering(args) {
        args.labelStyle = {
            fontFamily: 'Arial',
            fontStyle: 'normal',
            fontWeight: 'bold',
            fontSize: '12px',
            color: '#000'
        };
    }
</script>

Label-rendering-event.cs

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

    return View();
}

Legend Item Rendering Event

The LegendItemRendering event triggers before a legend item is rendered, allowing custom legend item styling:

CSHTML

<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) {
        if (args && args.text) {
            args.text = args.text.toUpperCase();
        }
        args.fill = '#333';
    }
</script>

Legend-item-rendering-event.cs

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

    return View();
}

Size Changed Event

Respond when the chart size changes (e.g., window resize):

CSHTML

<ejs-sankey id="sankey-container" width="90%" height="450px" sizeChanged="onSizeChanged">
    <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 onSizeChanged(args) {
        console.log('Chart size changed:', {
            width: args.currentSize.width,
            height: args.currentSize.height
        });
    }
</script>

Size-changed-event.cs

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

Complete Event Handler Example

Combine multiple events for comprehensive handling:

CSHTML

<ejs-sankey id="sankey-container" width="90%" height="450px" loaded="onSankeyLoaded">
    <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 onSankeyLoaded(args) {
        console.log('Sankey chart rendering complete', args);
        var element = document.getElementById('sankey');
        if (element) element.setAttribute('title', 'Sankey Chart Ready');
    }
</script>

Complete-event-handler.cs

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