React Charts - Small Value Groups

DevExtreme PieChart supports small value grouping operations. To enable this functionality, configure the smallValuesGrouping object within series or commonSeriesSettings. This demo sets smallValuesGrouping.mode to "smallValueThreshold" and specifies the threshold property.

www.wikipedia.org

TS JS

Backend API

import React from 'react'; import PieChart, { Series, Label, Connector, SmallValuesGrouping, Legend, Export, } from 'devextreme-react/pie-chart'; import { dataSource } from './data.ts'; function formatLabel(arg: { argumentText: string; valueText: string; }) { return `${arg.argumentText}: ${arg.valueText}%`; } function App() { return ( <PieChart id="pie" dataSource={dataSource} palette="Bright" title="Top internet languages" > <Series argumentField="language" valueField="percent" > <Label visible={true} customizeText={formatLabel} format="fixedPoint"> <Connector visible={true} width={0.5} /> </Label> <SmallValuesGrouping threshold={4.5} mode="smallValueThreshold" /> </Series> <Legend horizontalAlignment="center" verticalAlignment="bottom" /> <Export enabled={true} /> </PieChart> ); } export default App;

import React from 'react'; import PieChart, { Series, Label, Connector, SmallValuesGrouping, Legend, Export, } from 'devextreme-react/pie-chart'; import { dataSource } from './data.js'; function formatLabel(arg) { return `${arg.argumentText}: ${arg.valueText}%`; } function App() { return ( <PieChart id="pie" dataSource={dataSource} palette="Bright" title="Top internet languages" > <Series argumentField="language" valueField="percent" > <Label visible={true} customizeText={formatLabel} format="fixedPoint" > <Connector visible={true} width={0.5} /> </Label> <SmallValuesGrouping threshold={4.5} mode="smallValueThreshold" /> </Series> <Legend horizontalAlignment="center" verticalAlignment="bottom" /> <Export enabled={true} /> </PieChart> ); } export default App;

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );

export const dataSource = [{ language: 'English', percent: 55.5, }, { language: 'Chinese', percent: 2.8, }, { language: 'Spanish', percent: 4.6, }, { language: 'Japanese', percent: 5.0, }, { language: 'Portuguese', percent: 2.5, }, { language: 'German', percent: 5.8, }, { language: 'French', percent: 4.0, }, { language: 'Russian', percent: 5.9, }, { language: 'Italian', percent: 1.9, }, { language: 'Polish', percent: 1.7, }, { language: 'Turkish', percent: 1.5, }, { language: 'Dutch', percent: 1.3, }, { language: 'Persian', percent: 0.9, }, { language: 'Arabic', percent: 0.8, }, { language: 'Korean', percent: 0.7, }, { language: 'Czech', percent: 0.7, }, { language: 'Swedish', percent: 0.5, }, { language: 'Vietnamese', percent: 0.4, }, { language: 'Indonesian', percent: 0.4, }, { language: 'Greek', percent: 0.4, }, { language: 'Romanian', percent: 0.4, }, { language: 'Hungarian', percent: 0.3, }, { language: 'Danish', percent: 0.3, }, { language: 'Thai', percent: 0.3, }, { language: 'Finnish', percent: 0.2, }, { language: 'Slovak', percent: 0.2, }, { language: 'Bulgarian', percent: 0.2, }, { language: 'Norwegian', percent: 0.2, }, { language: 'Hebrew', percent: 0.1, }, { language: 'Lithuanian', percent: 0.1, }, { language: 'Croatian', percent: 0.1, }, { language: 'Ukrainian', percent: 0.1, }, { language: 'Norwegian Bokmål', percent: 0.1, }, { language: 'Serbian', percent: 0.1, }, { language: 'Catalan', percent: 0.1, }, { language: 'Slovenian', percent: 0.1, }, { language: 'Latvian', percent: 0.1, }, { language: 'Estonian', percent: 0.1, }];

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));

export const dataSource = [ { language: 'English', percent: 55.5, }, { language: 'Chinese', percent: 2.8, }, { language: 'Spanish', percent: 4.6, }, { language: 'Japanese', percent: 5.0, }, { language: 'Portuguese', percent: 2.5, }, { language: 'German', percent: 5.8, }, { language: 'French', percent: 4.0, }, { language: 'Russian', percent: 5.9, }, { language: 'Italian', percent: 1.9, }, { language: 'Polish', percent: 1.7, }, { language: 'Turkish', percent: 1.5, }, { language: 'Dutch', percent: 1.3, }, { language: 'Persian', percent: 0.9, }, { language: 'Arabic', percent: 0.8, }, { language: 'Korean', percent: 0.7, }, { language: 'Czech', percent: 0.7, }, { language: 'Swedish', percent: 0.5, }, { language: 'Vietnamese', percent: 0.4, }, { language: 'Indonesian', percent: 0.4, }, { language: 'Greek', percent: 0.4, }, { language: 'Romanian', percent: 0.4, }, { language: 'Hungarian', percent: 0.3, }, { language: 'Danish', percent: 0.3, }, { language: 'Thai', percent: 0.3, }, { language: 'Finnish', percent: 0.2, }, { language: 'Slovak', percent: 0.2, }, { language: 'Bulgarian', percent: 0.2, }, { language: 'Norwegian', percent: 0.2, }, { language: 'Hebrew', percent: 0.1, }, { language: 'Lithuanian', percent: 0.1, }, { language: 'Croatian', percent: 0.1, }, { language: 'Ukrainian', percent: 0.1, }, { language: 'Norwegian Bokmål', percent: 0.1, }, { language: 'Serbian', percent: 0.1, }, { language: 'Catalan', percent: 0.1, }, { language: 'Slovenian', percent: 0.1, }, { language: 'Latvian', percent: 0.1, }, { language: 'Estonian', percent: 0.1, }, ];

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.1.6/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>

#pie { height: 440px; }

You can also set smallValuesGrouping.mode to "topN". In this mode, our PieChart displays a predefined number of large data points (specified with topCount) and groups the rest.