Doughnut

Documentation

This demo illustrates the PieChart UI component with the doughnut series type, which is often used when comparing the percentage values of different point arguments within a series.

See more Hide details

Prev Demo Next Demo

www.geohive.com

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.

Send Feedback

Thank you!
We appreciate your feedback.

ASP.NET MVC

@model IEnumerable<object> @(Html.DevExtreme().PieChart() .ID("pie") .Palette(VizPalette.SoftPastel) .Type(PieChartType.Doughnut) .Title("The Population of Continents and Regions") .Tooltip(t => t .Enabled(true) .Format(Format.Millions) .CustomizeTooltip(@<text> function(arg) { return { text: arg.valueText + " - " + (arg.percent * 100).toFixed(2) + "%" }; } </text>) ) .Legend(l => l .HorizontalAlignment(HorizontalAlignment.Right) .VerticalAlignment(VerticalEdge.Top) .Margin(0) ) .Export(e => e.Enabled(true)) .Series(s => s .Add() .ArgumentField("Region") .ValueField("Val") .Label(l => l .Visible(true) .Format(Format.Millions) .Connector(c => c.Visible(true)) ) ) .DataSource(Model) )

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

#pie { height: 440px; }

Doughnut

jQuery

Angular

Vue

React

AngularJS

ASP.NET Core

ASP.NET MVC