React 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.jQuery
JavaScript$(function() { $("#pieChartContainer").dxPieChart({ smallValuesGrouping: { mode: "topN", topCount: 5 } }); });
Angular
HTMLTypeScript<dx-pie-chart> <dxo-small-values-grouping mode="topN" [topCount]="5"> </dxo-small-values-grouping> </dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxPieChartModule ], // ... })
Vue
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>
React
App.jsimport PieChart, { SmallValuesGrouping } from 'devextreme-react/pie-chart'; export default function App() { return ( <PieChart ... > <SmallValuesGrouping mode="topN" topCount={5} /> </PieChart> ); }
Threshold
Points that fall beyond a threshold establish a group. The smallValuesGrouping.threshold property specifies the threshold.jQuery
JavaScript$(function() { $("#pieChartContainer").dxPieChart({ smallValuesGrouping: { mode: "smallValueThreshold", threshold: 3.5 } }); });
Angular
HTMLTypeScript<dx-pie-chart> <dxo-small-values-grouping mode="smallValueThreshold" [threshold]="3.5"> </dxo-small-values-grouping> </dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxPieChartModule ], // ... })
Vue
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>
React
App.jsimport PieChart, { SmallValuesGrouping } from 'devextreme-react/pie-chart'; export default function App() { return ( <PieChart ... > <SmallValuesGrouping mode="smallValueThreshold" threshold={3.5} /> </PieChart> ); }
The group for small points is called "others" by default. You can change this using the smallValuesGrouping.groupName property.
jQuery
$(function() { $("#pieChartContainer").dxPieChart({ smallValuesGrouping: { // ... groupName: "miscellaneous" } }); });
Angular
<dx-pie-chart> <dxo-small-values-grouping ... groupName="miscellaneous"> </dxo-small-values-grouping> </dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxPieChartModule ], // ... })
Vue
<template> <DxPieChart ... > <DxSmallValuesGrouping ... group-name="miscellaneous" /> </DxPieChart> </template> <script> import DxPieChart, { DxSmallValuesGrouping } from 'devextreme-vue/pie-chart'; export default { components: { DxPieChart, DxSmallValuesGrouping }, // ... } </script>
React
import PieChart, { SmallValuesGrouping } from 'devextreme-react/pie-chart'; export default function App() { return ( <PieChart ... > <SmallValuesGrouping ... groupName="miscellaneous" /> </PieChart> ); }
If you have technical questions, please create a support ticket in the DevExpress Support Center.