Vue 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

<template> <div> <DxPieChart :data-source="dataSource" :resolve-label-overlapping="resolveMode" palette="Bright" title="Olympic Medals in 2008" > <DxSeries argument-field="country" value-field="medals" > <DxLabel :visible="true" :customize-text="formatText" /> </DxSeries> <DxMargin :bottom="20"/> <DxExport :enabled="true"/> <DxLegend :visible="false"/> <DxAnimation :enabled="false"/> </DxPieChart> <div class="options"> <div class="caption">Options</div> <div class="option"> <span>Label Overlapping Resolution Mode</span> <DxSelectBox :data-source="resolveModes" :input-attr="{ 'aria-label': 'Resolution Mode' }" v-model:value="resolveMode" /> </div> </div> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; import DxPieChart, { DxSeries, DxLabel, DxMargin, DxExport, DxLegend, DxAnimation, type DxPieChartTypes, } from 'devextreme-vue/pie-chart'; import DxSelectBox from 'devextreme-vue/select-box'; import { dataSource } from './data.ts'; const resolveModes: DxPieChartTypes.ShiftLabelOverlap[] = ['shift', 'hide', 'none']; const resolveMode = ref(resolveModes[0]); const formatText = ({ argumentText, percentText }: { argumentText: string; percentText: string }) => `${argumentText} (${percentText})`; </script> <style> .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; } </style>

export const dataSource = [{ country: 'USA', medals: 112, }, { country: 'China', medals: 100, }, { country: 'Russia', medals: 60, }, { country: 'Britain', medals: 49, }, { country: 'Australia', medals: 46, }, { country: 'France', medals: 43, }, { country: 'Germany', medals: 41, }, { country: 'South Korea', medals: 32, }, { country: 'Cuba', medals: 29, }, { country: 'Italy', medals: 27, }, { country: 'Japan', medals: 25, }, { country: 'Ukraine', medals: 22, }, { country: 'Canada', medals: 20, }, { country: 'Spain', medals: 19, }];

import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');

<!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/25.1.6/css/dx.light.css" /> <script src="https://cdn.jsdelivr.net/npm/typescript@5.4.5/lib/typescript.js"></script> <script type="module"> import * as vueCompilerSFC from "https://cdn.jsdelivr.net/npm/@vue/compiler-sfc@3.4.27/dist/compiler-sfc.esm-browser.js"; window.vueCompilerSFC = vueCompilerSFC; </script> <script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.ts"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>