const DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', ($scope) => {
$scope.chartOptions = {
dataSource,
commonSeriesSettings: {
argumentField: 'state',
type: 'fullStackedBar',
},
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: {
verticalAlignment: 'bottom',
horizontalAlignment: 'center',
},
title: 'Population: Age Structure',
export: {
enabled: true,
},
tooltip: {
enabled: true,
customizeTooltip(arg) {
return {
text: `${arg.percentText} - ${arg.valueText}`,
};
},
},
};
});
<!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/22.1.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.1.4/css/dx.light.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/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/22.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="chart" dx-chart="chartOptions"></div>
</div>
</body>
</html>
#chart {
height: 440px;
}
const 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,
}];