Your search did not match any results.
Charts

Hierarchical Data Structure

Documentation
The TreeMap widget visualizes hierarchical data as a set of nested rectangles whose sizes are proportional to the visualized values. In this demo, the widget accepts a data source of a hierarchical structure.
Copy to Codepen
Apply
Reset
$(function(){ $("#treemap").dxTreeMap({ dataSource: citiesPopulation, title: "The Most Populated Cities by Continents", resolveLabelOverflow: "ellipsis", tooltip: { enabled: true, format: "thousands", customizeTooltip: function (arg) { var data = arg.node.data, result = null; if (arg.node.isLeaf()) { result = "<b>" + data.name + "</b> (" + data.country + ")<br/>Population: " + arg.valueText; } return { text: result }; } }, size: { height: 500 } }); });
<!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="js/jquery-3.1.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/event.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/supplemental.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/unresolved.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/message.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/number.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/currency.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/date.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.5/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.5/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.5/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/16.2.5/js/dx.all.js"></script> <script src="data.js"></script> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="treemap"></div> </div> </body> </html>
var citiesPopulation = [{ name: "Africa", items: [{ value: 21324000, name: "Lagos", country: "Nigeria" }, { value: 9735000, name: "Kinshasa", country: "Democratic Republic of the Congo" }, { value: 9278441, name: "Cairo", country: "Egypt" }] }, { name: "Asia", items: [{ value: 24256800, name: "Shanghai", country: "China" }, { value: 23500000, name: "Karachi", country: "Pakistan" }, { value: 21516000, name: "Beijing", country: "China" }, { value: 16787941, name: "Delhi", country: "India" }, { value: 15200000, name: "Tianjin", country: "China" }] }, { name: "Australia", items: [{ value: 4840600, name: "Sydney", country: "Austraila" }, { value: 4440000, name: "Melbourne", country: "Austraila" }] }, { name: "Europe", items: [{ value: 14160467, name: "Istanbul", country: "Turkey" }, { value: 12197596, name: "Moscow", country: "Russia" }, { value: 8538689, name: "London", country: "United Kingdom" }, { value: 5191690, name: "Saint Petersburg", country: "Russia" }, { value: 4470800, name: "Ankara", country: "Turkey" }, { value: 3517424, name: "Berlin", country: "Germany" }] }, { name: "North America", items: [{ value: 8874724, name: "Mexico City", country: "Mexico" }, { value: 8550405, name: "New York City", country: "United States" }, { value: 3884307, name: "Los Angeles", country: "United States" }, { value: 2808503, name: "Toronto", country: "Canada" }] }, { name: "South America", items: [{ value: 11895893, name: "São Paulo", country: "Brazil" }, { value: 8693387, name: "Lima", country: "Peru" }, { value: 7776845, name: "Bogotá", country: "Colombia" }, { value: 6429923, name: "Rio de Janeiro", country: "Brazil" }] }];