React PieChart - Resolve Overlapping

In multi-series charts, point labels often overlap. To decide how to resolve overlapping, specify the resolveLabelOverlapping property. It allows you to hide certain labels, or slightly shift them, or keep them as they are (i.e. overlapping).

jQuery
JavaScript
$(function() {
    $("#pieChartContainer").dxPieChart({
        // ...
        resolveLabelOverlapping: 'shift' // or 'hide' | 'none'
    });
});
Angular
HTML
TypeScript
<dx-pie-chart ...
    resolveLabelOverlapping="shift"> <!-- or 'hide' | 'none' -->
</dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxPieChartModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxPieChart ...
        resolve-label-overlapping="shift"> <!-- or 'hide' | 'none' -->
    </DxPieChart>
</template>

<script>
import DxPieChart from 'devextreme-vue/pie-chart';

export default {
    components: {
        DxPieChart
    }
}
</script>
React
App.js
import React from 'react';
import PieChart from 'devextreme-react/pie-chart';

class App extends React.Component {
    render() {
        return (
            <PieChart ...
                resolveLabelOverlapping="shift"> {/* or 'hide' | 'none' */}
            </PieChart>
        );
    }
}

Another way to deal with overlapping labels is to hide all labels of a specific series once their count exceeds a certain limit. Mostly, this feature is useful if the series accepts new points at runtime. To specify the limit on point labels, assign a number to the maxLabelCount property.

jQuery
JavaScript
$(function() {
    $("#pieChartContainer").dxPieChart({
        // ...
        series: [{
            // ...
            maxLabelCount: 10
        }, {
            // ...
        }]
    });
});
Angular
HTML
TypeScript
<dx-pie-chart ... >
    <dxi-series [maxLabelCount]="10" ... ></dxi-series>
</dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxPieChartModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxPieChart ... >
        <DxSeries ...
            :max-label-count="10"
        />
    </DxPieChart>
</template>

<script>
import DxPieChart, {
    DxSeries
} from 'devextreme-vue/pie-chart';

export default {
    components: {
        DxPieChart,
        DxSeries
    }
}
</script>
React
App.js
import React from 'react';
import PieChart, {
    Series
} from 'devextreme-react/pie-chart';

class App extends React.Component {
    render() {
        return (
            <PieChart ... >
                <Series ...
                    maxLabelCount={10}
                />
            </PieChart>
        );
    }
}

View Demo

See Also