Angular 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"> <dx-pie-chart #pie title="Olympic Medals in 2024" palette="bright" [dataSource]="olympicMedals" [resolveLabelOverlapping]="resolveOverlappingTypes[0]" > <dxo-pie-chart-margin [bottom]="20"></dxo-pie-chart-margin> <dxo-pie-chart-legend [visible]="false"></dxo-pie-chart-legend> <dxo-pie-chart-export [enabled]="true"></dxo-pie-chart-export> <dxi-pie-chart-series argumentField="country" valueField="medals"> <dxo-pie-chart-label [visible]="true" [customizeText]="customizeLabel"> </dxo-pie-chart-label> </dxi-pie-chart-series> </dx-pie-chart> <div class="options"> <div class="caption">Options</div> <div class="option"> <span>Label Overlapping Resolution Mode</span> <dx-select-box [dataSource]="resolveOverlappingTypes" [(value)]="pie.resolveLabelOverlapping" [inputAttr]="{ 'aria-label': 'Overlapping Mode' }" > </dx-select-box> </div> </div> </div>

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core'; import { DxPieChartModule, DxSelectBoxModule } from 'devextreme-angular'; import { MedalsInfo, Service } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [Service], preserveWhitespaces: true, imports: [ DxPieChartModule, DxSelectBoxModule, ], }) export class AppComponent { olympicMedals: MedalsInfo[]; resolveOverlappingTypes = ['shift', 'hide', 'none']; constructor(service: Service) { this.olympicMedals = service.getMedalsData(); } customizeLabel(arg) { return `${arg.argumentText} (${arg.percentText})`; } } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), ], });

.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; } ::ng-deep .option > .dx-widget { display: inline-block; vertical-align: middle; }

import { Injectable, } from '@angular/core'; export class MedalsInfo { country: string; medals: number; } const medals: MedalsInfo[] = [{ country: 'USA', medals: 126, }, { country: 'Great Britain', medals: 65, }, { country: 'France', medals: 64, }, { country: 'Australia', medals: 53, }, { country: 'Japan', medals: 45, }, { country: 'Italy', medals: 40, }, { country: 'Netherlands', medals: 34, }, { country: 'Germany', medals: 33, }, { country: 'South Korea', medals: 32, }, { country: 'Canada', medals: 27, }, { country: 'New Zealand', medals: 20, }, { country: 'Hungary', medals: 19, }, { country: 'Spain', medals: 18, }, { country: 'Uzbekistan', medals: 13, }]; @Injectable() export class Service { getMedalsData(): MedalsInfo[] { return medals; } }

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> <script src="https://cdn.jsdelivr.net/npm/zone.js@0.16.2/bundles/zone.umd.js"></script> <script src="./bundle.js" type="module"></script> </body> </html>