$(function(){
$("#chart").dxChart({
palette: "vintage",
dataSource: dataSource,
commonSeriesSettings:{
argumentField: "year",
type: "fullstackedbar"
},
series: [{
valueField: "africa",
name: "Africa"
}, {
valueField: "asia",
name: "Asia"
}, {
valueField: "europe",
name: "Europe"
}, {
valueField: "latinamerica",
name: "Latin America & Caribbean"
}, {
valueField: "northamerica",
name: "Northern America"
}, {
valueField: "oceania",
name: "Oceania"
}, {
axis: "total",
type: "spline",
valueField: "total",
name: "Total",
color: "#008fd8"
}
],
valueAxis: [{
grid: {
visible: true
}
}, {
name: "total",
position: "right",
grid: {
visible: true
},
title: {
text: "Total Population, billions"
}
}],
tooltip: {
enabled: true,
shared: true,
format: {
type: "largeNumber",
precision: 1
},
customizeTooltip: function (arg) {
var items = arg.valueText.split("\n"),
color = arg.point.getColor();
$.each(items, function(index, item) {
if(item.indexOf(arg.seriesName) === 0) {
items[index] = $("<span>")
.text(item)
.addClass("active")
.css("color", color)
.prop("outerHTML");
}
});
return { text: items.join("\n") };
}
},
legend: {
verticalAlignment: "bottom",
horizontalAlignment: "center"
},
"export": {
enabled: true
},
title: {
text: "Evolution of Population by Continent"
}
});
});
<!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://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">
<div id="chart"></div>
</div>
</body>
</html>
#chart {
height: 440px;
}
.active {
font-weight: 500;
}
var dataSource = [{
year: "1750",
africa: 106000000,
asia: 502000000,
europe: 163000000,
latinamerica: 16000000,
northamerica: 2000000,
oceania: 2000000,
total: 791000000
}, {
year: "1800",
africa: 107000000,
asia: 635000000,
europe: 203000000,
latinamerica: 24000000,
northamerica: 7000000,
oceania: 2000000,
total: 978000000
}, {
year: "1850",
africa: 111000000,
asia: 809000000,
europe: 276000000,
latinamerica: 38000000,
northamerica: 26000000,
oceania: 2000000,
total: 1262000000
}, {
year: "1900",
africa: 133000000,
asia: 947000000,
europe: 408000000,
latinamerica: 74000000,
northamerica: 82000000,
oceania: 6000000,
total: 1650000000
}, {
year: "1950",
africa: 229895000,
asia: 1403388000,
europe: 547287000,
latinamerica: 167368000,
northamerica: 171614000,
oceania: 12675000,
total: 2532227000
}, {
year: "2000",
africa: 811101000,
asia: 3719044000,
europe: 726777000,
latinamerica: 521419000,
northamerica: 313289000,
oceania: 31130000,
total: 6122770000
}, {
year: "2050",
africa: 2191599000,
asia: 5142220000,
europe: 719257000,
latinamerica: 750956000,
northamerica: 446862000,
oceania: 55223000,
total: 9306128000
}];