Your search did not match any results.

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.

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