Charts - Custom Label in the Center

To customize the doughnut's center, declare the SVG markup in the centerTemplate. This template accepts the PieChart instance. Use this instance to call PieChart methods. For example, call the getInnerRaduis() method to get the radius of the doughnut hole.

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

@{ var data = (DevExtreme.MVC.Demos.Models.SampleData.DoughnutWithCustomLabelInCenterDataItem[])Model; var countries = Enumerable.Distinct((data).Select(i => i.Country)); } <div class="long-title"><h3>Energy Production (GWh, 2016)</h3></div> <div class="pies-container"> @foreach(var country in countries) { @(Html.DevExtreme().PieChart() .Type(PieChartType.Doughnut) .ResolveLabelOverlapping(ShiftLabelOverlap.Shift) .InnerRadius(0.65) .SizeGroup("piesGroup") .Series(s => s .Add() .ArgumentField("Commodity") .ValueField("Total") .Label(l=>l.Visible(true) .Connector(c=>c.Visible(true)) .BackgroundColor("none") .CustomizeText("customizeLabel") .Format(Format.FixedPoint) ) ) .Legend(l=>l.Visible(false)) .CenterTemplate(@<text> <svg> <circle cx="100" cy="100" r="<%- getInnerRadius() - 6 %>" fill="#eee"></circle> <image href="<%- getImagePath('@(country)') %>" x="70" y="58" width="60px" height="40px"/> <text text-anchor="middle" style="font-size: 18px" x="100" y="120" fill="#494949"> <tspan x="100" >@(country)</tspan><tspan x="100" dy="20px" style="font-weight: 600"><%- formatNumber(calculateTotal(getAllSeries())) %></tspan> </text> </svg> </text>) .DataSource(data.Where(item=>item.Country==country).ToList()) ) } </div> <script> var formatNumber = new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format; function getImagePath(country) { return '../../Content/Images/flags/' + country.replace(/\s/, "").toLowerCase() + ".svg"; } function customizeLabel(e) { return e.argumentText + "\n" + e.valueText; } function calculateTotal(series) { return series[0].getVisiblePoints().reduce(function (s, p) { return s + p.originalValue }, 0); } </script>

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 DoughnutWithCustomLabelInCenter() { return View(SampleData.DoughnutWithCustomLabelInCenterData); } } }

using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace DevExtreme.MVC.Demos.Models.SampleData { public class DoughnutWithCustomLabelInCenterDataItem { public string Country { get; set; } public string Commodity { get; set; } public int Total { get; set; } } public partial class SampleData { public static readonly IEnumerable<DoughnutWithCustomLabelInCenterDataItem> DoughnutWithCustomLabelInCenterData = new DoughnutWithCustomLabelInCenterDataItem[] { new DoughnutWithCustomLabelInCenterDataItem() { Country = "France", Commodity = "Nuclear", Total = 413278 }, new DoughnutWithCustomLabelInCenterDataItem() { Country = "Germany", Commodity = "Nuclear", Total = 76536 }, new DoughnutWithCustomLabelInCenterDataItem() { Country = "France", Commodity = "Thermal", Total = 47594 }, new DoughnutWithCustomLabelInCenterDataItem() { Country = "Germany", Commodity = "Thermal", Total = 375809 }, new DoughnutWithCustomLabelInCenterDataItem() { Country = "France", Commodity = "Wind", Total = 21033 }, new DoughnutWithCustomLabelInCenterDataItem() { Country = "Germany", Commodity = "Wind", Total = 58228 }, new DoughnutWithCustomLabelInCenterDataItem() { Country = "France", Commodity = "Solar", Total = 7274 }, new DoughnutWithCustomLabelInCenterDataItem() { Country = "Germany", Commodity = "Solar", Total = 37520 }, new DoughnutWithCustomLabelInCenterDataItem() { Country = "France", Commodity = "Tidal, Wave", Total = 618 } }; } }

.pies-container { margin: auto; width: 800px; } .pies-container > div { width: 400px; float: left; margin-top: -50px; } .long-title h3 { font-weight: 200; font-size: 28px; text-align: center; margin-bottom: 20px; }