Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss

Relocate Labels

Labels are located beside their series points by default. Change the series.label.position option 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

See Also