Charts - Doughnut with Multiple Series

This demo illustrates the ability of the PieChart to display multiple series on a single chart. Different series are displayed as rings inside one another.

Backend API

@(Html.DevExtreme().PieChart() .ID("pie") .Palette(VizPalette.Ocean) .Title(t => t .Text("Imports/Exports of Goods and Services") .Subtitle(s => s.Text("(billion US$, 2012)")) ) .Legend(l => l.Visible(true)) .Type(PieChartType.Doughnut) .InnerRadius(0.2) .CommonSeriesSettings(s => s.Label(l => l.Visible(false))) .Tooltip(t => t .Enabled(true) .Format(Format.Currency) .CustomizeTooltip(@<text> function() { return { text: this.argumentText + "<br>" + this.seriesName + ": " + this.valueText + "B" }; } </text>) ) .Export(e => e.Enabled(true)) .Series(s => { s.Add().Name("Export").ArgumentField("Country").ValueField("Export"); s.Add().Name("Import").ArgumentField("Country").ValueField("Import"); }) .DataSource(new[] { new { Country = "Brazil", Export = 241, Import = 225 }, new { Country = "Russia", Export = 536, Import = 284 }, new { Country = "India", Export = 317, Import = 453 }, new { Country = "China", Export = 1702, Import = 1717 }, new { Country = "Japan", Export = 699, Import = 800 }, new { Country = "USA", Export = 1448, Import = 2795 }, new { Country = "Canada", Export = 522, Import = 440 }, new { Country = "France", Export = 626, Import = 717 }, new { Country = "England", Export = 424, Import = 568 }, new { Country = "Germany", Export = 1403, Import = 1000 } }) )

using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.NETCore.Demos.Models; using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public class ChartsController : Controller { public ActionResult PieWithMultipleSeries() { return View(); } } }

#pie { height: 440px; } #pie * { margin: 0 auto; }