var DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', function DemoController($scope) {
$scope.chartOptions = {
dataSource: dataSource,
commonSeriesSettings: {
argumentField: "state",
type: "stackedBar"
},
series: [
{ valueField: "maleyoung", name: "Male: 0-14", stack: "male" },
{ valueField: "malemiddle", name: "Male: 15-64", stack: "male" },
{ valueField: "maleolder", name: "Male: 65 and older", stack: "male" },
{ valueField: "femaleyoung", name: "Female: 0-14", stack: "female" },
{ valueField: "femalemiddle", name: "Female: 15-64", stack: "female" },
{ valueField: "femaleolder", name: "Female: 65 and older", stack: "female" }
],
legend: {
horizontalAlignment: "right",
position: "inside",
border: { visible: true },
columnCount: 2,
customizeItems: function(items) {
var sortedItems = [];
items.forEach(function(item) {
var startIndex = item.series.stack === "male" ? 0 : 3;
sortedItems.splice(startIndex, 0, item);
});
return sortedItems;
}
},
valueAxis: {
title: {
text: "Populations, millions"
}
},
title: "Population: Age Structure",
"export": {
enabled: true
},
tooltip: {
enabled: true
}
};
});
<!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/20.2.6/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.6/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/20.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" ng-app="DemoApp" ng-controller="DemoController">
<div id="chart" dx-chart="chartOptions"></div>
</div>
</body>
</html>
#chart {
height: 440px;
}
var dataSource = [{
state: "USA",
maleyoung: 29.956,
malemiddle: 90.354,
maleolder: 14.472,
femaleyoung: 28.597,
femalemiddle: 91.827,
femaleolder: 20.362
}, {
state: "Brazil",
maleyoung: 25.607,
malemiddle: 55.793,
maleolder: 3.727,
femaleyoung: 24.67,
femalemiddle: 57.598,
femaleolder: 5.462
}, {
state: "Russia",
maleyoung: 13.493,
malemiddle: 48.983,
maleolder: 5.802,
femaleyoung: 12.971,
femalemiddle: 52.14,
femaleolder: 12.61
}, {
state: "Japan",
maleyoung: 9.575,
malemiddle: 43.363,
maleolder: 9.024,
femaleyoung: 9.105,
femalemiddle: 42.98,
femaleolder: 12.501
}, {
state: "Mexico",
maleyoung: 17.306,
malemiddle: 30.223,
maleolder: 1.927,
femaleyoung: 16.632,
femalemiddle: 31.868,
femaleolder: 2.391
}, {
state: "Germany",
maleyoung: 6.679,
malemiddle: 28.638,
maleolder: 5.133,
femaleyoung: 6.333,
femalemiddle: 27.693,
femaleolder: 8.318
}, {
state: "United Kindom",
maleyoung: 5.816,
malemiddle: 19.622,
maleolder: 3.864,
femaleyoung: 5.519,
femalemiddle: 19.228,
femaleolder: 5.459
}];