Relocate Labels

Labels are located beside their series points by default. Change the series.label.position property to rearrange labels in columns or place them inside series points.

jQuery

JavaScript

$(function() {
    $("#pieChartContainer").dxPieChart({
        // ...
        series: {
            label: {
                position: "columns" // or "inside" | "outside"
            }
        }
    });
});

Angular

HTML

TypeScript

<dx-pie-chart ... >
    <dxi-series>
        <dxo-label
            position="columns"> <!-- or "inside" | "outside" -->
        </dxo-label>
    </dxi-series>
</dx-pie-chart>

import { DxPieChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxPieChartModule
    ],
    // ...
})

Vue

App.vue

<template> 
    <DxPieChart ... >
        <DxSeries>
            <DxLabel position="columns"/> <!-- or "inside" | "outside" -->
        </DxSeries>
    </DxPieChart>
</template>

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

export default {
    components: {
        DxPieChart,
        DxSeries,
        DxLabel
    }
}
</script>

React

App.js

import React from 'react';
import PieChart, {
    Series,
    Label
} from 'devextreme-react/pie-chart';

class App extends React.Component {
    render() {
        return (
            <PieChart ... >
                <Series>
                    <Label position="columns" /> {/* or "inside" | "outside" */}
                </Series>
            </PieChart>
        );
    }
}

View Demo

Relocate Labels

jQuery

Angular

Vue

React

See Also