Drill-Down Chart
This demo shows a drill-down chart that visualizes data on two hierarchical views. The main view displays the population breakdown by continent. When you click the bar, a detailed view reveals the most populated countries on the selected continent.
Bind to Data
This demo binds the drill-down chart to an array of objects. To visualize hierarchical data in the drill-down chart, filter the data source by the parentID for different drill-down views in the filterData function.
Implement View Navigation
To navigate from the main view to a detailed view, filter the data source by a different parentID in the onPointClick event handler. To navigate back, click the Back button. This action resets the data source filter. Use the isFirstLevel flag to distinguish views.
Customize the Appearance
Use the customizePoint function to change the individual point properties. This function returns an object with properties that should be changed for a certain point. In this demo, this function changes the color and hoverStyle properties.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
window.onload = function () {
const isFirstLevel = ko.observable(true);
const dataSource = ko.observable(filterData(''));
const buttonIsVisible = ko.computed(() => !isFirstLevel());
const viewModel = {
chartOptions: {
dataSource,
title: 'The Most Populated Countries by Continents',
series: {
type: 'bar',
},
legend: {
visible: false,
},
valueAxis: {
showZero: false,
},
onPointClick(e) {
if (isFirstLevel()) {
isFirstLevel(false);
removePointerCursor();
dataSource(filterData(e.target.originalArgument));
}
},
customizePoint() {
const pointSettings = {
color: colors[Number(isFirstLevel())],
};
if (!isFirstLevel()) {
pointSettings.hoverStyle = {
hatching: 'none',
};
}
return pointSettings;
},
},
buttonOptions: {
text: 'Back',
icon: 'chevronleft',
visible: buttonIsVisible,
onClick() {
if (!isFirstLevel()) {
isFirstLevel(true);
addPointerCursor();
dataSource(filterData(''));
}
},
},
};
ko.applyBindings(viewModel, document.getElementById('chart-demo'));
addPointerCursor();
function filterData(name) {
return data.filter((item) => item.parentID === name);
}
function addPointerCursor() {
document.getElementById('chart').classList.add('pointer-on-bars');
}
function removePointerCursor() {
document.getElementById('chart').classList.remove('pointer-on-bars');
}
};
<!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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.1.5/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.1.5/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/22.1.5/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-demo">
<div id="chart" data-bind="dxChart: chartOptions"></div>
<div class="button-container">
<div id="backButton" data-bind="dxButton: buttonOptions"></div>
</div>
</div>
</div>
</body>
</html>
#chart {
height: 440px;
width: 100%;
}
#chart.pointer-on-bars .dxc-series rect {
cursor: pointer;
}
.button-container {
text-align: center;
height: 40px;
position: absolute;
top: 7px;
left: 0;
}
const colors = ['#6babac', '#e55253'];
const data = [
{ arg: 'Asia', val: 3007613498, parentID: '' },
{ arg: 'North America', val: 493603615, parentID: '' },
{ arg: 'Europe', val: 438575293, parentID: '' },
{ arg: 'Africa', val: 381331438, parentID: '' },
{ arg: 'South America', val: 331126555, parentID: '' },
{ arg: 'Nigeria', val: 181562056, parentID: 'Africa' },
{ arg: 'Egypt', val: 88487396, parentID: 'Africa' },
{ arg: 'Congo', val: 77433744, parentID: 'Africa' },
{ arg: 'Morocco', val: 33848242, parentID: 'Africa' },
{ arg: 'China', val: 1380083000, parentID: 'Asia' },
{ arg: 'India', val: 1306687000, parentID: 'Asia' },
{ arg: 'Pakistan', val: 193885498, parentID: 'Asia' },
{ arg: 'Japan', val: 126958000, parentID: 'Asia' },
{ arg: 'Russia', val: 146804372, parentID: 'Europe' },
{ arg: 'Germany', val: 82175684, parentID: 'Europe' },
{ arg: 'Turkey', val: 79463663, parentID: 'Europe' },
{ arg: 'France', val: 66736000, parentID: 'Europe' },
{ arg: 'United Kingdom', val: 63395574, parentID: 'Europe' },
{ arg: 'United States', val: 325310275, parentID: 'North America' },
{ arg: 'Mexico', val: 121005815, parentID: 'North America' },
{ arg: 'Canada', val: 36048521, parentID: 'North America' },
{ arg: 'Cuba', val: 11239004, parentID: 'North America' },
{ arg: 'Brazil', val: 205737996, parentID: 'South America' },
{ arg: 'Colombia', val: 48400388, parentID: 'South America' },
{ arg: 'Venezuela', val: 30761000, parentID: 'South America' },
{ arg: 'Peru', val: 28220764, parentID: 'South America' },
{ arg: 'Chile', val: 18006407, parentID: 'South America' },
];