Your search did not match any results.
Charts

Pie with Small Values Grouped

Documentation
In this example, the PieChart widget combines all values below the threshold option in one category called "others".
Copy to Codepen
Apply
Reset
$(function(){ $("#pie").dxPieChart({ palette: "bright", dataSource: 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: function (point) { return point.argumentText + ": " + point.valueText + "%"; } }, smallValuesGrouping: { mode: "smallValueThreshold", threshold: 4.5 } }] }); });
<!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="js/jquery-3.1.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/event.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/supplemental.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/unresolved.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/message.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/number.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/currency.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/date.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/16.2.6/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; }
var 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 }];