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>
- );
- }
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.