Your search did not match any results.
Charts

Pie with Small Values Grouped

API Reference
In this example, the DevExtreme HTML5 Pie Chart Widget combines all values below the threshold option and displays them within the others category.
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.4/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/16.2.4/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; width: 100%; }
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 }];