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.

    App.js
    • import 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.

    App.js
    • import 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.

App.js
  • import PieChart, {
  • SmallValuesGrouping
  • } from 'devextreme-react/pie-chart';
  •  
  • export default function App() {
  • return (
  • <PieChart ... >
  • <SmallValuesGrouping ...
  • groupName="miscellaneous"
  • />
  • </PieChart>
  • );
  • }

View Demo