Charts - Doughnut with Top N Series

In this example, the PieChart component displays only top N values and aggregates the remainder into the others category.

www.wikipedia.org

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

@(Html.DevExtreme().PieChart() .ID("pie") .Type(PieChartType.Doughnut) .Palette(VizPalette.SoftPastel) .Title("Top Internet Languages") .Legend(l => l .HorizontalAlignment(HorizontalAlignment.Center) .VerticalAlignment(VerticalEdge.Bottom) ) .Export(e => e.Enabled(true)) .Series(s => s .Add() .SmallValuesGrouping(g => g .Mode(SmallValuesGroupingMode.TopN) .TopCount(3) ) .ArgumentField("Language") .ValueField("Percent") .Label(l => l .Visible(true) .Format(Format.FixedPoint) .CustomizeText(@<text> function (point) { return point.argumentText + ": " + point.valueText + "%"; } </text>) .Connector(c => c .Visible(true) .Width(1) ) ) ) .DataSource(new[] { new { Language = "English", Percent = 55.5 }, new { Language = "Chinese", Percent = 4.0 }, new { Language = "Spanish", Percent = 4.3 }, new { Language = "Japanese", Percent = 4.9 }, new { Language = "Portuguese", Percent = 2.3 }, new { Language = "German", Percent = 5.6 }, new { Language = "French", Percent = 3.8 }, new { Language = "Russian", Percent = 6.3 }, new { Language = "Italian", Percent = 1.6 }, new { Language = "Polish", Percent = 1.8 } }) )

using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; using System; using System.Collections.Generic; using System.Linq; using System.Text.Json; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class ChartsController : Controller { public ActionResult DoughnutWithTopNSeries() { return View(); } } }

#pie { height: 440px; }