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$, 2024)")) ) .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 = "United States", Export = 2065, Import = 3359 }, new { Country = "Germany", Export = 1683, Import = 1425 }, new { Country = "Japan", Export = 707, Import = 743 }, new { Country = "United Kingdom", Export = 513, Import = 816 }, new { Country = "France", Export = 640, Import = 750 }, new { Country = "Italy", Export = 674, Import = 615 }, new { Country = "Canada", Export = 568, Import = 573 }, new { Country = "India", Export = 443, Import = 702 }, new { Country = "Brazil", Export = 337, Import = 278 }, }) )

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