$(() => {
$('#treemap').dxTreeMap({
dataSource: citiesPopulation,
title: 'The Most Populated Cities by Continents',
idField: 'id',
parentField: 'parentId',
tooltip: {
enabled: true,
format: 'thousands',
customizeTooltip(arg) {
const { data } = arg.node;
let result = null;
if (arg.node.isLeaf()) {
result = `<span class='city'>${data.name}</span> (${
data.country})<br/>Population: ${arg.valueText}`;
}
return {
text: result,
};
},
},
});
});
<!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/23.1.5/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/23.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="treemap"></div>
</div>
</body>
</html>
#treemap {
height: 500px;
}
.city {
font-weight: 500;
}
const citiesPopulation = [{
id: '1',
name: 'Africa',
}, {
id: '1_1',
parentId: '1',
value: 21324000,
name: 'Lagos',
country: 'Nigeria',
}, {
id: '1_2',
parentId: '1',
value: 9735000,
name: 'Kinshasa',
country: 'Democratic Republic of the Congo',
}, {
id: '1_3',
parentId: '1',
value: 9278441,
name: 'Cairo',
country: 'Egypt',
}, {
id: '2',
name: 'Asia',
}, {
id: '2_1',
parentId: '2',
value: 24256800,
name: 'Shanghai',
country: 'China',
}, {
id: '2_2',
parentId: '2',
value: 23500000,
name: 'Karachi',
country: 'Pakistan',
}, {
id: '2_3',
parentId: '2',
value: 21516000,
name: 'Beijing',
country: 'China',
}, {
id: '2_4',
parentId: '2',
value: 16787941,
name: 'Delhi',
country: 'India',
}, {
id: '2_5',
parentId: '2',
value: 15200000,
name: 'Tianjin',
country: 'China',
}, {
id: '3',
name: 'Australia',
}, {
id: '3_1',
parentId: '3',
value: 4840600,
name: 'Sydney',
country: 'Austraila',
}, {
id: '3_2',
parentId: '3',
value: 4440000,
name: 'Melbourne',
country: 'Austraila',
}, {
id: '4',
name: 'Europe',
}, {
id: '4_1',
parentId: '4',
value: 14160467,
name: 'Istanbul',
country: 'Turkey',
}, {
id: '4_2',
parentId: '4',
value: 12197596,
name: 'Moscow',
country: 'Russia',
}, {
id: '4_3',
parentId: '4',
value: 8538689,
name: 'London',
country: 'United Kingdom',
}, {
id: '4_4',
parentId: '4',
value: 5191690,
name: 'Saint Petersburg',
country: 'Russia',
}, {
id: '4_5',
parentId: '4',
value: 4470800,
name: 'Ankara',
country: 'Turkey',
}, {
id: '4_6',
parentId: '4',
value: 3517424,
name: 'Berlin',
country: 'Germany',
}, {
id: '5',
name: 'North America',
}, {
id: '5_1',
parentId: '5',
value: 8874724,
name: 'Mexico City',
country: 'Mexico',
}, {
id: '5_2',
parentId: '5',
value: 8550405,
name: 'New York City',
country: 'United States',
}, {
id: '5_3',
parentId: '5',
value: 3884307,
name: 'Los Angeles',
country: 'United States',
}, {
id: '5_4',
parentId: '5',
value: 2808503,
name: 'Toronto',
country: 'Canada',
}, {
id: '6',
name: 'South America',
}, {
id: '6_1',
parentId: '6',
value: 11895893,
name: 'São Paulo',
country: 'Brazil',
}, {
id: '6_2',
parentId: '6',
value: 8693387,
name: 'Lima',
country: 'Peru',
}, {
id: '6_3',
parentId: '6',
value: 7776845,
name: 'Bogotá',
country: 'Colombia',
}, {
id: '6_4',
parentId: '6',
value: 6429923,
name: 'Rio de Janeiro',
country: 'Brazil',
}];
