Free Trial Buy
    Your search did not match any results.
    Sankey Chart

    Sankey Chart

    Documentation

    The DevExtreme HTML5 JavaScript Sankey Chart is used to visualize the flow magnitude between value sets. The values are connected. A wider connection denotes a higher flow magnitude.

    Prev Demo Next Demo

    jQuery

    AngularJS

    Angular

    Vue

    React

    ASP.NET MVC

    ASP.NET Core

    @(Html.DevExtreme().Sankey() .ID("sankey") .Title(t=>t.Text("Commodity Turnover in 2017")) .SourceField("Source") .TargetField("Target") .WeightField("Weight") .Node(n => n.Width(8) .Padding(30) ) .Link(l => l.ColorMode(SankeyColorMode.Gradient)) .Tooltip(t => t .Enabled(true) .CustomizeLinkTooltip( @<text> function(info) { return { html: "<b>From:</b> " + info.source + "<br/><b>To:</b> " + info.target + "<br/>" + "<b>Weight:</b> " + info.weight }; } </text>) ) .DataSource(new List<object> { new { Source = "Spain", Target = "United States of America", Weight = 2 }, new { Source = "Germany", Target = "United States of America", Weight = 8 }, new { Source = "France", Target = "United States of America", Weight = 4 }, new { Source = "Germany", Target = "Great Britain", Weight = 2 }, new { Source = "France", Target = "Great Britain", Weight = 4 }, new { Source = "United States of America", Target = "Australia", Weight = 6 }, new { Source = "United States of America", Target = "New Zealand", Weight = 5 }, new { Source = "United States of America", Target = "Japan", Weight = 3 }, new { Source = "Great Britain", Target = "New Zealand", Weight = 4 }, new { Source = "Great Britain", Target = "Japan", Weight = 1 }, }) )
    using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.NETCore.Demos.Models; using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using Newtonsoft.Json; using System; using System.Collections.Generic; namespace DevExtreme.NETCore.Demos.Controllers { public class ChartsController : Controller { public ActionResult SankeyChart() { return View(); } } }
    #sankey { height: 440px; }