Pie with Small Values Grouped
Documentation
In this example, the PieChart widget combines all values below the threshold option in one category called «others».
www.wikipedia.org
Thank you!
We appreciate your feedback.
We appreciate your feedback.
var DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', function DemoController($scope) {
$scope.chartOptions = {
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="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</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/19.1.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.4/css/dx.light.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C\/script%3E'))</script>
<script src="https://cdn3.devexpress.com/jslib/19.1.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" ng-app="DemoApp" ng-controller="DemoController">
<div id="pie" dx-pie-chart="chartOptions"></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
}];