Vue 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.

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>

View Demo

See Also