DevExtreme React - 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
    ],
    // ...
})

View Demo

See Also