Charts - Resolve Label Overlap

When a DevExtreme PieChart contains a large number of data points or if data points are compressed visually, point labels may overlap. Use the resolveLabelOverlapping property to minimize the impact of overlapping labels. In this demo, you can hide or shift overlapping labels.

www.wikipedia.org

Backend API

<div id="chart-demo"> @(Html.DevExtreme().PieChart() .ID("pie-chart") .Palette(VizPalette.Bright) .Title("Olympic Medals in 2008") .Margin(m => m.Bottom(20)) .Legend(l => l.Visible(false)) .Animation(a => a.Enabled(false)) .ResolveLabelOverlapping(ShiftLabelOverlap.Shift) .Export(e => e.Enabled(true)) .Series(s => s .Add() .ArgumentField("Country") .ValueField("Medals") .Label(l => l .Visible(true) .CustomizeText(@<text> function(arg) { return arg.argumentText + " (" + arg.percentText + ")"; } </text>) ) ) .DataSource(new[] { new { Country = "USA", Medals = 112 }, new { Country = "China", Medals = 100 }, new { Country = "Russia", Medals = 60 }, new { Country = "Britain", Medals = 49 }, new { Country = "Australia", Medals = 46 }, new { Country = "France", Medals = 43 }, new { Country = "Germany", Medals = 41 }, new { Country = "South Korea", Medals = 32 }, new { Country = "Cuba", Medals = 29 }, new { Country = "Italy", Medals = 27 }, new { Country = "Japan", Medals = 25 }, new { Country = "Ukraine", Medals = 22 }, new { Country = "Canada", Medals = 20 }, new { Country = "Spain", Medals = 19 } }) ) <div class="options"> <div class="caption">Options</div> <div class="option"> <span>Label Overlapping Resolution Mode</span> @(Html.DevExtreme().SelectBox() .DataSource(new[] { ShiftLabelOverlap.Shift, ShiftLabelOverlap.Hide, ShiftLabelOverlap.None }) .Value(ShiftLabelOverlap.Shift) .InputAttr("aria-label", "Resolution Mode") .OnValueChanged(@<text> function (e) { $("#pie-chart").dxPieChart("option", "resolveLabelOverlapping", e.value); } </text>) ) </div> </div> </div>

using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.NETCore.Demos.Models; using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public class ChartsController : Controller { public ActionResult PieResolveLabelOverlap() { return View(); } } }

.options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); margin-top: 20px; } .option { margin-top: 10px; display: flex; align-items: center; } .caption { font-size: 18px; font-weight: 500; } .option > span { margin-right: 10px; } .option > .dx-widget { display: inline-block; vertical-align: middle; }