JavaScript/jQuery 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

Backend API

$(() => { $('#pie').dxPieChart({ palette: 'bright', dataSource, title: 'Top internet languages', legend: { horizontalAlignment: 'center', verticalAlignment: 'bottom', }, export: { enabled: true, }, series: [{ argumentField: 'language', valueField: 'percent', label: { visible: true, connector: { visible: true, width: 0.5, }, format: 'fixedPoint', customizeText(point) { return `${point.argumentText}: ${point.valueText}%`; }, }, smallValuesGrouping: { mode: 'smallValueThreshold', threshold: 4.5, }, }], }); });

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" 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" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.1.6/css/dx.light.css" /> <script src="js/dx.all.js?v=25.1.6"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="pie"></div> </div> </body> </html>

#pie { height: 440px; }

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, }];

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.