DevExtreme v23.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

Doughnut with Top N Series

Documentation

In this example, the PieChart component displays only top N values and aggregates the remainder into the others category.

www.wikipedia.org
Backend API
$(() => { $('#pie').dxPieChart({ type: 'doughnut', palette: 'Soft Pastel', title: 'Top Internet Languages', dataSource, legend: { horizontalAlignment: 'center', verticalAlignment: 'bottom', }, export: { enabled: true, }, series: [{ smallValuesGrouping: { mode: 'topN', topCount: 3, }, argumentField: 'language', valueField: 'percent', label: { visible: true, format: 'fixedPoint', customizeText(point) { return `${point.argumentText}: ${point.valueText}%`; }, connector: { visible: true, width: 1, }, }, }], }); });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <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=1.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/23.2.5/css/dx.light.css" /> <script src="js/dx.all.js"></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: 4.0, }, { language: 'Spanish', percent: 4.3, }, { language: 'Japanese', percent: 4.9, }, { language: 'Portuguese', percent: 2.3, }, { language: 'German', percent: 5.6, }, { language: 'French', percent: 3.8, }, { language: 'Russian', percent: 6.3, }, { language: 'Italian', percent: 1.6, }, { language: 'Polish', percent: 1.8, }];