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
Feedback