Free Trial Buy
    Your search did not match any results.
    Tree Map

    Plain Data Structure

    Documentation

    In this demo, the TreeMap component accepts a data source of a plain structure.

    See more Hide details
    Prev Demo Next Demo
    www.wikipedia.org

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    Backend API
    Copy to CodePen
    Apply
    Reset
    window.onload = function() { var viewModel = { treeMapOptions: { dataSource: citiesPopulation, title: "The Most Populated Cities by Continents", idField: "id", parentField: "parentId", tooltip: { enabled: true, format: "thousands", customizeTooltip: function (arg) { var data = arg.node.data, result = null; if (arg.node.isLeaf()) { result = "<span class='city'>" + data.name + "</span> (" + data.country + ")<br/>Population: " + arg.valueText; } return { text: result }; } } } }; ko.applyBindings(viewModel, document.getElementById("treemap-demo")); };
    <!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/21.1.6/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.6/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/21.1.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="treemap-demo"> <div id="treemap" data-bind="dxTreeMap: treeMapOptions"></div> </div> </div> </body> </html>
    #treemap { height: 500px; } .city { font-weight: 500; }
    var 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" }];