DevExtreme v24.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

Hierarchical Data Structure

The TreeMap component visualizes data as a set of rectangles (tiles). The tile size corresponds to a data point value relative to other data points.

The TreeMap component works with collections of objects. If objects in your collection have a plain structure, the component visualizes them as tiles. If your data is hierarchical, the TreeMap displays it as a group of nested tiles.

To bind data to the component, assign the collection of objects to the TreeMap's dataSource property.

www.wikipedia.org
Backend API
<template> <DxTreeMap id="treemap" :data-source="citiesPopulation" title="The Most Populated Cities by Continents" > <DxTooltip :enabled="true" :customize-tooltip="customizeTooltip" format="thousands" /> </DxTreeMap> </template> <script setup lang="ts"> import DxTreeMap, { DxTooltip } from 'devextreme-vue/tree-map'; import { citiesPopulation } from './data.ts'; const customizeTooltip = ({ node, node: { data: { name, country } }, valueText }) => ( { text: node.isLeaf() ? `<span class="city">${name}</span> (${country})<br/>Population: ${valueText}` : null, }); </script> <style> #treemap { height: 500px; } .city { font-weight: 500; } </style>
window.exports = window.exports || {}; window.config = { transpiler: 'plugin-babel', meta: { '*.vue': { loader: 'vue-loader', }, '*.ts': { loader: 'demo-ts-loader', }, '*.svg': { loader: 'svg-loader', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, }, paths: { 'root:': '../../../../', 'npm:': 'https://unpkg.com/', }, map: { 'vue': 'npm:vue@3.2.47/dist/vue.esm-browser.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@1.1.1/index.js', 'demo-ts-loader': 'root:utils/demo-ts-loader.js', 'svg-loader': 'root:utils/svg-loader.js', 'mitt': 'npm:mitt/dist/mitt.umd.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@24.1.3/cjs', 'devextreme-vue': 'npm:devextreme-vue@24.1.3/cjs', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.8/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.56/dist/dx-gantt.js', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.13', 'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js', 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js', // Prettier 'prettier/standalone': 'npm:prettier@2.8.8/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js', }, packages: { 'devextreme-vue': { main: 'index.js', }, 'devextreme': { defaultExtension: 'js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.13/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, }, }; System.config(window.config);
export const 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', }], }];
import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');
<!DOCTYPE html> <html lang="en"> <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=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.3/css/dx.light.css" /> <script src="https://unpkg.com/typescript@4.9.5/lib/typescript.js"></script> <script type="module"> import * as vueCompilerSFC from "https://unpkg.com/@vue/compiler-sfc@3.4.16/dist/compiler-sfc.esm-browser.js"; window.vueCompilerSFC = vueCompilerSFC; </script> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.ts"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>

Once you assign the data source, specify the valueField and labelField properties. If you specify these properties, the component can determine the object fields that indicate TreeMap labels and values in the collection. The default values for these properties are value and name, respectively.

If your data is hierarchical, you also need to specify the childrenField property. The default childrenField property value is items. You can use these data field names to arrange your collection as shown in this demo.

For example, one of the objects in this demo data source looks as follows:

{
    name: 'Australia',
    items: [{
        value: 4840600,
        name: 'Sydney',
        country: 'Australia',
    }, {
        value: 4440000,
        name: 'Melbourne',
        country: 'Australia',
    }],
}

This object produces a tile with the Australia label. The Australia tile has two nested tiles labeled Sydney and Melbourne.

To make the TreeMap more informative, you can specify a title and implement a tooltip.