Getting Started with the ASP.NET MVC Sankey Chart Control

23 Jul 20267 minutes to read

This section briefly explains how to add the Syncfusion® ASP.NET MVC Sankey Chart control to your ASP.NET MVC application using Visual Studio.

Prerequisites

Refer to the System requirements for ASP.NET MVC controls before creating the application.

Create an ASP.NET MVC application with HTML helper

You can create an ASP.NET MVC application using either of the following options:

Install the ASP.NET MVC NuGet package

To add Syncfusion® ASP.NET MVC controls in the application, open the NuGet Package Manager in Visual Studio by selecting (Tools → NuGet Package Manager → Manage NuGet Packages for Solution). Search for Syncfusion.EJ2.MVC5 and install it.

Alternatively, you can use the Package Manager Console by navigating to:
Tools → NuGet Package Manager → Package Manager Console, and then run the following command:

Install-Package Syncfusion.EJ2.MVC5 -Version 34.1.29

NOTE

Syncfusion® ASP.NET MVC controls are available on nuget.org. Refer to the NuGet packages topic to learn more about installing NuGet packages in various operating system environments. The Syncfusion.EJ2.MVC5 NuGet package depends on Newtonsoft.Json for JSON serialization and Syncfusion.Licensing for validating the Syncfusion® license key.

Add the namespace

Add the Syncfusion.EJ2 namespace reference in the Web.config file available in the Views folder.

<namespaces>
    <add namespace="Syncfusion.EJ2" />
</namespaces>

Add script resources

Add the script reference inside the <head> element of the ~/Views/Shared/_Layout.cshtml file as follows.

<head>
    ...
    <!-- Syncfusion ASP.NET MVC controls scripts -->
    <script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js"></script>
</head>

NOTE

Refer to the Adding Script Reference topic to learn different approaches for adding script references in your ASP.NET MVC application.

Register the Syncfusion® Script Manager

Register the script manager EJS().ScriptManager() at the end of the <body> element in the ~/Views/Shared/_Layout.cshtml file as follows.

<body>
    ...
    <!-- Syncfusion ASP.NET MVC Script Manager -->
    @Html.EJS().ScriptManager()
</body>

Build the Sankey Chart control

This section walks through adding the Sankey Chart control to ~/Views/Home/Index.cshtml and progressively binding data to it.

Step 1: Add the Sankey Chart control

Add the Syncfusion® ASP.NET MVC Sankey Chart control to the ~/Views/Home/Index.cshtml page.

@Html.EJS().Sankey("sankey-container")
    .Width("90%")
    .Height("420px")
    .Title("Sankey Chart")
    .Tooltip(tooltip => tooltip.Enable(true))
    .LegendSettings(legend => legend.Visible(true))
    .Nodes(ViewBag.SankeyNodes)
    .Links(ViewBag.SankeyLinks)
    .Render()
public ActionResult Index()
{
    List<SankeyNode> nodes = new List<SankeyNode>
    {
        new SankeyNode { Id = "A" },
        new SankeyNode { Id = "B" },
        new SankeyNode { Id = "C" }
    };

    List<SankeyLink> links = new List<SankeyLink>
    {
        new SankeyLink { SourceId = "A", TargetId = "B", Value = 100 },
        new SankeyLink { SourceId = "B", TargetId = "C", Value = 80 }
    };

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

    return View();
}

Press Ctrl + F5 on Windows to run the application. The Syncfusion® ASP.NET MVC Sankey Chart control will be rendered in the default web browser.

Step 2: Bind data to the Sankey Chart

Sankey charts are built from two collections: a Nodes list (the categories at each end of a flow) and a Links list (the connections between them with an associated value). Use the following model classes for the data.

@Html.EJS().Sankey("sankey-container")
    .Width("90%")
    .Height("420px")
    .Title("Energy Flow Diagram")
    .Tooltip(tooltip => tooltip.Enable(true))
    .LegendSettings(legend => legend.Visible(true))
    .Nodes(ViewBag.SankeyNodes)
    .Links(ViewBag.SankeyLinks)
    .Render()
public ActionResult Index()
{
    List<SankeyNode> nodes = new List<SankeyNode>
    {
        new SankeyNode { Id = "Energy Input", Label = new SankeyChartDataLabel { Text = "Energy Input" } },
        new SankeyNode { Id = "Generation", Label = new SankeyChartDataLabel { Text = "Generation" } },
        new SankeyNode { Id = "Distribution", Label = new SankeyChartDataLabel { Text = "Distribution" } },
        new SankeyNode { Id = "Consumption", Label = new SankeyChartDataLabel { Text = "Consumption" } }
    };

    List<SankeyLink> links = new List<SankeyLink>
    {
        new SankeyLink { SourceId = "Energy Input", TargetId = "Generation", Value = 500 },
        new SankeyLink { SourceId = "Generation", TargetId = "Distribution", Value = 450 },
        new SankeyLink { SourceId = "Distribution", TargetId = "Consumption", Value = 400 }
    };

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

    return View();
}

Press Ctrl + F5 on Windows to run the application. The Syncfusion® ASP.NET MVC Sankey Chart control will be rendered in the default web browser.

Troubleshooting

If the Sankey Chart control does not render as expected, review the following common issues and their resolutions.

  • “Script Manager is not defined” or scripts run twice — @Html.EJS().ScriptManager() was not added, or was added more than once. Ensure ScriptManager is registered exactly once at the end of <body> in _Layout.cshtml.

  • “Could not load file or assembly ‘Syncfusion.EJ2’“ — The NuGet package was not restored. Run Update-Package -reinstall in the Package Manager Console, or restore via Visual Studio (right-click solution → Restore NuGet Packages).

  • Chart renders but no flows appear — The SourceId and TargetId values in SankeyLink must match an Id defined in SankeyNode. Property names are case-sensitive; verify they match exactly.

  • Newtonsoft.Json reference error after upgrade — Syncfusion.EJ2.MVC5 requires a specific Newtonsoft.Json version. Install a compatible Newtonsoft.Json version (≥ 12.0.2) via NuGet.

See also