Your search did not match any results.

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.

Prev Demo
Next Demo
Backend API
@{ var data = (DevExtreme.NETCore.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 '../../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.NETCore.Demos.Models; using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using Newtonsoft.Json; using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public class ChartsController : Controller { public ActionResult DoughnutWithCustomLabelInCenter() { return View(SampleData.DoughnutWithCustomLabelInCenterData); } } }
using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; namespace DevExtreme.NETCore.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; }