JavaScript/jQuery PieChart - Relocate the Legend

The legend can be aligned in the horizontal or vertical direction using the horizontalAlignment or verticalAlignment property.

App.vue
  • <template>
  • <DxPieChart ... >
  • <DxLegend
  • horizontal-alignment="center" <!-- or "left" | "right" -->
  • vertical-alignment="top" <!-- or "bottom" -->
  • />
  • </DxPieChart>
  • </template>
  •  
  • <script>
  • import DxPieChart, {
  • DxLegend
  • } from 'devextreme-vue/pie-chart';
  •  
  • export default {
  • components: {
  • DxPieChart,
  • DxLegend
  • }
  • }
  • </script>

Below, you can try out these properties in action.

See Also