Vue PieChart - Group Smaller Points

Smaller points on the PieChart can be collected in a single group in one of the following modes:

  • Top N
    Top N points with the biggest values remain ungrouped; all other points form a group. The smallValuesGrouping.topCount property specifies the N.

    App.vue
    • <template>
    • <DxPieChart ... >
    • <DxSmallValuesGrouping
    • mode="topN"
    • :top-count="5"
    • />
    • </DxPieChart>
    • </template>
    •  
    • <script>
    • import DxPieChart, {
    • DxSmallValuesGrouping
    • } from 'devextreme-vue/pie-chart';
    •  
    • export default {
    • components: {
    • DxPieChart,
    • DxSmallValuesGrouping
    • },
    • // ...
    • }
    • </script>
  • Threshold
    Points that fall beyond a threshold establish a group. The smallValuesGrouping.threshold property specifies the threshold.

    App.vue
    • <template>
    • <DxPieChart ... >
    • <DxSmallValuesGrouping
    • mode="smallValueThreshold"
    • :threshold="3.5"
    • />
    • </DxPieChart>
    • </template>
    •  
    • <script>
    • import DxPieChart, {
    • DxSmallValuesGrouping
    • } from 'devextreme-vue/pie-chart';
    •  
    • export default {
    • components: {
    • DxPieChart,
    • DxSmallValuesGrouping
    • },
    • // ...
    • }
    • </script>

The group for small points is called "others" by default. You can change this using the smallValuesGrouping.groupName property.

App.vue
  • <template>
  • <DxPieChart ... >
  • <DxSmallValuesGrouping ...
  • group-name="miscellaneous"
  • />
  • </DxPieChart>
  • </template>
  •  
  • <script>
  • import DxPieChart, {
  • DxSmallValuesGrouping
  • } from 'devextreme-vue/pie-chart';
  •  
  • export default {
  • components: {
  • DxPieChart,
  • DxSmallValuesGrouping
  • },
  • // ...
  • }
  • </script>

View Demo