Data Visualization ▸ 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.

Options

Label Overlapping Resolution Mode

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