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