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.
@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);
}
}
}