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 widget methods. For example, call the getInnerRaduis() method to get the radius of the doughnut hole.

UNdata
@{ 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(PieChartResolveLabelOverlapping.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> function formatNumber(value) { return Globalize.formatNumber(value, { maximumFractionDigits: 0 }); } 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((s, p) => 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 = 403195 }, new DoughnutWithCustomLabelInCenterDataItem() { Country = "Germany", Commodity = "Nuclear", Total = 84634 }, new DoughnutWithCustomLabelInCenterDataItem() { Country = "France", Commodity = "Thermal", Total = 57471 }, new DoughnutWithCustomLabelInCenterDataItem() { Country = "Germany", Commodity = "Thermal", Total = 419591 }, new DoughnutWithCustomLabelInCenterDataItem() { Country = "France", Commodity = "Wind", Total = 21400 }, new DoughnutWithCustomLabelInCenterDataItem() { Country = "Germany", Commodity = "Wind", Total = 78598 }, new DoughnutWithCustomLabelInCenterDataItem() { Country = "France", Commodity = "Solar", Total = 8160 }, new DoughnutWithCustomLabelInCenterDataItem() { Country = "Germany", Commodity = "Solar", Total = 38098 }, new DoughnutWithCustomLabelInCenterDataItem() { Country = "France", Commodity = "Tidal, Wave", Total = 501 } }; } }
.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; }