React PieChart - 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> ); } }
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.