Syncfusion® ASP.NET MVC Sankey Chart control visualizes flow and the proportional relationships between entities using directed paths with varying widths. It is ideal for representing energy flow, resource allocation, material flow, and multi-step process distributions. The control supports customizable nodes and links, color mapping, tooltip, legend, and interactive hover effects. It helps reveal patterns and proportions in flow-based data for analytical dashboards and reporting applications built on ASP.NET MVC.
Install
No framework information available.
README
Syncfusion® ASP.NET MVC Sankey Component
A flow diagram visualization component that displays flow and proportional relationships between values using node-link diagrams. Commonly used for energy flows, budget allocation, and resource tracking.
Using this package with an AI coding agent
Before generating Syncfusion® code, ask your AI coding agent to run the Syncfusion® setup using the following prompt:
Set up this project for Syncfusion® before generating code. Fetch and follow the official instructions at https://ai.syncfusion.com/agent-setup/prompt.md, then report the detected platform, installed skill pack, MCP status, and any required licensing action.
The setup detects your project's platform and loads the appropriate Syncfusion® skill pack. No Syncfusion® account or MCP key is required to install or read Syncfusion® agent skills.
Platform reference: https://ai.syncfusion.com/aspnet-mvc/llms.txt
Key Features
- Visualizes directional flow of quantities between nodes
- Configurable node width, padding, and alignment
- Gradient and solid link colorization
- Interactive tooltip on hover for link and node details
- Legend for identifying node groups
- Supports custom node and link labels
- Export to PNG, JPEG, SVG, and PDF
Common Setup
These setup steps are required only once for your application, regardless of which Syncfusion components you use.
1. Install Base NuGet Package
Install-Package Syncfusion.AspNetMvc.Sankey
2. Add Namespace Reference
Edit Web.config under the Views folder and add the Syncfusion.EJ2 namespace:
<namespaces>
<add namespace="Syncfusion.EJ2"/>
</namespaces>
3. Add Stylesheet & Script References
In your layout file (~/Views/Shared/_Layout.cshtml), add the following in the <head> section:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewBag.Title - Syncfusion Application</title>
<!-- Syncfusion ASP.NET MVC controls styles -->
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/34.2.6/fluent2.css" />
<!-- Syncfusion ASP.NET MVC controls scripts -->
<script src="https://cdn.syncfusion.com/ej2/34.2.6/dist/ej2.min.js"></script>
</head>
4. Register Script Manager
At the end of the <body> tag in your layout file (~/Views/Shared/_Layout.cshtml):
<body>
@RenderBody()
<!-- Syncfusion ASP.NET MVC Script Manager -->
@Html.EJS().ScriptManager()
</body>
Quick Start
Step 1: Add ASP.NET MVC Sankey control
Add the Syncfusion® ASP.NET MVC Sankey control ~/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()
Step 2: Create controller ~/Controllers/HomeController.cs
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();
}
Step 3: Run the Application
Press Ctrl+F5 to run the application in your browser.
Documentation
Support and Feedback
- For queries, reach our Syncfusion® support team or post the queries through the community forums.
- Request new feature through Syncfusion® feedback portal.
License
This is a commercial product and requires a paid license for possession or use. Syncfusion® licensed software, including this component, is subject to the terms and conditions of Syncfusion® EULA. You can purchase a license here or start a free 30-day trial here.
About Syncfusion®
Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion® has more than 29,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.
[email protected] | www.syncfusion.com | Toll Free: 1-888-9 DOTNET
Support
License
This is a commercial product and requires a paid license for possession or use. Review the Syncfusion® EULA
About Syncfusion®
Syncfusion® provides 1600+ UI components and frameworks for web, mobile, and desktop development across multiple platforms:
Web: Blazor | ASP.NET MVC | ASP.NET MVC | JavaScript | Angular | React | Vue
Desktop: WinForms | WPF | WinUI
Learn more at www.syncfusion.com
[email protected] | Toll Free: 1-888-9-DOTNET
Changes from Previous Version
Adoption Assessment
A verified publisher signal is available. Assess fit from the package's supported frameworks, license and dependency graph rather than popularity alone.
Related Guides & Workflows
Learn how to evaluate, integrate, or audit this package in your .NET project.