Charts - Doughnut Selection

This demo illustrates how a user can select slices on the PieChart component with the doughnut series type.

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.Donut) .Palette(VizPalette.SoftPastel) .Title("Olympic Medals in 2008") .Legend(l => l .HorizontalAlignment(HorizontalAlignment.Right) .VerticalAlignment(VerticalEdge.Top) .Margin(0) ) .Export(e => e.Enabled(true)) .Series(s => s .Add() .ArgumentField("Country") .ValueField("Medals") .HoverStyle(h => h.Color("#ffd700")) ) .OnPointClick(@<text> function(arg) { arg.target.select(); } </text>) .DataSource(new[] { new { Country = "USA", Medals = 110 }, new { Country = "China", Medals = 100 }, new { Country = "Russia", Medals = 72 }, new { Country = "Britain", Medals = 47 }, new { Country = "Australia", Medals = 46 }, new { Country = "Germany", Medals = 41 }, new { Country = "France", Medals = 40 }, new { Country = "South Korea", Medals = 31 } }) )

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 DoughnutSelection() { return View(); } } }

#pie { height: 440px; }