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 React from 'react';
- import PieChart, {
- SmallValuesGrouping
- } from 'devextreme-react/pie-chart';
- class App extends React.Component {
- render() {
- return (
- <PieChart ... >
- <SmallValuesGrouping
- topCount={5}
- mode="topN"
- />
- </PieChart>
- );
- }
- }
Threshold
Points that fall beyond a threshold establish a group. The smallValuesGrouping.threshold property specifies the threshold.App.js- import React from 'react';
- import PieChart, {
- SmallValuesGrouping
- } from 'devextreme-react/pie-chart';
- class App extends React.Component {
- render() {
- return (
- <PieChart ... >
- <SmallValuesGrouping
- threshold={3.5}
- mode="smallValueThreshold"
- />
- </PieChart>
- );
- }
- }
The group for small points is called "others" by default. You can change this using the smallValuesGrouping.groupName property.
- import React from 'react';
- import PieChart, {
- SmallValuesGrouping
- } from 'devextreme-react/pie-chart';
- class App extends React.Component {
- render() {
- return (
- <PieChart ... >
- <SmallValuesGrouping ...
- groupName="miscellaneous"
- />
- </PieChart>
- );
- }
- }
If you have technical questions, please create a support ticket in the DevExpress Support Center.