Your search did not match any results.
Tree Map

Drill Down

Documentation

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 bounds 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.

www.wikipedia.org
Backend API
Copy to CodeSandBox
Apply
Reset
<dx-tree-map [dataSource]="citiesPopulations" [interactWithGroup]="true" [maxDepth]="2" (onClick)="nodeClick($event)" (onDrill)="drill($event)" > <dxo-size height="440"></dxo-size> <dxo-title text="The Most Populated Cities by Continents" [placeholderSize]="80" ></dxo-title> <dxo-colorizer palette="soft"></dxo-colorizer> </dx-tree-map> <div id="drill-down-title"> <span *ngFor="let drillInfo of drillInfos; let isLast = last"> <span [ngClass]="{ link: !!drillInfo.node }" (click)="drillInfoClick(drillInfo.node)" >{{ drillInfo.text }}</span > {{ isLast ? "" : " > " }} </span> </div>
import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxTreeMapModule } from 'devextreme-angular'; import { CitiesPopulation, Service } from './app.service'; interface DrillInfo { text: string; node?: any; } if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'], providers: [Service], }) export class AppComponent { citiesPopulations: CitiesPopulation[]; drillInfos: DrillInfo[] = []; constructor(service: Service) { this.citiesPopulations = service.getCitiesPopulations(); } nodeClick(e) { e.node.drillDown(); } drill(e) { this.drillInfos = []; for (let node = e.node.getParent(); node; node = node.getParent()) { this.drillInfos.unshift({ text: node.label() || 'All Continents', node, }); } if (this.drillInfos.length) { this.drillInfos.push({ text: e.node.label(), }); } } drillInfoClick(node) { if (node) { node.drillDown(); } } } @NgModule({ imports: [ BrowserModule, DxTreeMapModule, ], declarations: [AppComponent], bootstrap: [AppComponent], }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep #drill-down-title { position: absolute; top: 50px; height: 36px; width: 100%; text-align: center; } ::ng-deep .link { color: #337ab7; text-decoration: underline; cursor: pointer; }
import { Injectable } from '@angular/core'; export interface CitiesPopulation { name: string; items: any[]; } const citiesPopulations: CitiesPopulation[] = [{ name: 'Africa', items: [{ name: 'Nigeria', items: [{ name: 'Lagos', value: 21324000, }, { name: 'Kano', value: 3626068, }, { name: 'Ibadan', value: 3200000, }, { name: 'Abuja', value: 3000000, }, { name: 'Kaduna', value: 1652844, }, { name: 'Port Harcourt', value: 1320214, }, { name: 'Aba', value: 1300000, }, { name: 'Ogbomosho', value: 1200000, }, { name: 'Maiduguri', value: 1197497, }], }, { name: 'Egypt', items: [{ name: 'Cairo', value: 9278441, }, { name: 'Alexandria', value: 4546231, }, { name: 'Giza', value: 4239988, }, { name: 'Shubra El-Kheima', value: 3072951, }, { name: 'Port Said', value: 1607353, }, { name: 'Suez', value: 1347352, }], }, { name: 'Congo', items: [{ name: 'Kinshasa', value: 9735000, }, { name: 'Lubumbashi', value: 1786397, }, { name: 'Mbuji-Mayi', value: 1680991, }, { name: 'Kananga', value: 1061181, }, { name: 'Bukavu', value: 1012053, }, { name: 'Kisangani', value: 935977, }], }, { name: 'Morocco', items: [{ name: 'Casablanca', value: 3359818, }, { name: 'Fès', value: 1112072, }, { name: 'Tangier', value: 947952, }, { name: 'Marrakech', value: 928850, }, { name: 'Salé', value: 920403, }], }], }, { name: 'Asia', items: [{ name: 'China', items: [{ name: 'Shanghai', value: 24256800, }, { name: 'Beijing', value: 21516000, }, { name: 'Chongqing', value: 18384100, }, { name: 'Chengdu', value: 17677122, }, { name: 'Tianjin', value: 15200000, }, { name: 'Guangzhou', value: 13080500, }, { name: 'Shenzhen', value: 10630000, }], }, { name: 'Pakistan', items: [{ name: 'Karachi', value: 23500000, }, { name: 'Faisalabad', value: 6418745, }, { name: 'Lahore', value: 6318745, }, { name: 'Rawalpindi', value: 3363911, }, { name: 'Hyderabad', value: 3429471, }, { name: 'Multan', value: 2050000, }], }, { name: 'India', items: [{ name: 'Delhi', value: 16787941, }, { name: 'Mumbai', value: 12478447, }, { name: 'Bengaluru', value: 8425970, }, { name: 'Hyderabad', value: 7749334, }, { name: 'Chennai', value: 7088000, }, { name: 'Ahmedabad', value: 5577940, }], }, { name: 'Japan', items: [{ name: 'Tokyo', value: 9262046, }, { name: 'Yokohama', value: 3697894, }, { name: 'Osaka', value: 2668586, }, { name: 'Nagoya', value: 2283289, }, { name: 'Sapporo', value: 1918096, }], }], }, { name: 'Europe', items: [{ name: 'Turkey', items: [{ name: 'Istanbul', value: 14160467, }, { name: 'Ankara', value: 4470800, }, { name: 'İzmir', value: 3276815, }, { name: 'Bursa', value: 1957247, }, { name: 'Adana', value: 1717473, }], }, { name: 'Russia', items: [{ name: 'Moscow', value: 12197596, }, { name: 'Saint Petersburg', value: 5191690, }, { name: 'Novosibirsk', value: 1473754, }, { name: 'Yekaterinburg', value: 1428042, }], }, { name: 'United Kingdom', items: [{ name: 'London', value: 8538689, }, { name: 'Birmingham', value: 1101360, }, { name: 'Glasgow', value: 599650, }, { name: 'Liverpool', value: 473073, }], }, { name: 'Germany', items: [{ name: 'Berlin', value: 3517424, }, { name: 'Hamburg', value: 1686100, }, { name: 'Munich', value: 1185400, }, { name: 'Cologne', value: 1046680, }, { name: 'Frankfurt', value: 717624, }], }, { name: 'France', items: [{ name: 'Paris', value: 2240621, }, { name: 'Marseille', value: 852516, }, { name: 'Lyon', value: 500715, }, { name: 'Toulouse', value: 461190, }], }], }, { name: 'North America', items: [{ name: 'Mexico', items: [{ name: 'Mexico City', value: 8874724, }, { name: 'Ecatepec de Morelos', value: 1742023, }, { name: 'Puebla', value: 1508707, }, { name: 'Guadalajara', value: 1506359, }, { name: 'Juárez', value: 1409987, }, { name: 'Tijuana', value: 1399282, }, { name: 'León', value: 1281434, }], }, { name: 'United States', items: [{ name: 'New York City', value: 8550405, }, { name: 'Los Angeles', value: 3884307, }, { name: 'Chicago', value: 2722389, }, { name: 'Houston', value: 2296224, }, { name: 'Philadelphia', value: 1567442, }, { name: 'Phoenix', value: 1563025, }, { name: 'San Antonio', value: 1469845, }, { name: 'San Diego', value: 1394928, }], }, { name: 'Canada', items: [{ name: 'Toronto', value: 2808503, }, { name: 'Montreal', value: 1731245, }, { name: 'Calgary', value: 1096833, }, { name: 'Ottawa', value: 956710, }, { name: 'Edmonton', value: 895000, }, { name: 'Mississauga', value: 713443, }], }, { name: 'Cuba', items: [{ name: 'Havana', value: 2135498, }, { name: 'Santiago de Cuba', value: 425851, }, { name: 'Camagüey', value: 305845, }], }], }, { name: 'South America', items: [{ name: 'Brazil', items: [{ name: 'São Paulo', value: 11895893, }, { name: 'Rio de Janeiro', value: 6429923, }, { name: 'Salvador', value: 2902927, }, { name: 'Brasília', value: 2914830, }, { name: 'Fortaleza', value: 2591188, }, { name: 'Belo Horizonte', value: 2513451, }, { name: 'Manaus', value: 2094391, }], }, { name: 'Peru', items: [{ name: 'Lima', value: 8693387, }, { name: 'Callao', value: 1010315, }, { name: 'Arequipa', value: 869351, }, { name: 'Trujillo', value: 788236, }, { name: 'Chiclayo', value: 600440, }], }, { name: 'Colombia', items: [{ name: 'Bogotá', value: 7776845, }, { name: 'Medellín', value: 2441123, }, { name: 'Cali', value: 2400653, }, { name: 'Barranquilla', value: 1214253, }, { name: 'Cartagena', value: 959594, }], }, { name: 'Chile', items: [{ name: 'Santiago', value: 5507282, }, { name: 'Puente Alto', value: 610118, }, { name: 'Maipú', value: 468390, }], }, { name: 'Venezuela', items: [{ name: 'Caracas', value: 3289886, }, { name: 'Maracaibo', value: 1653211, }, { name: 'Barquisimeto', value: 1116182, }, { name: 'Valencia', value: 901900, }, { name: 'Ciudad Guayana', value: 877547, }], }], }]; @Injectable() export class Service { getCitiesPopulations() { return citiesPopulations; } }
// In real applications, you should not transpile code in the browser. // You can see how to create your own application with Angular and DevExtreme here: // https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/ window.config = { transpiler: 'ts', typescriptOptions: { module: 'system', emitDecoratorMetadata: true, experimentalDecorators: true, }, meta: { 'typescript': { 'exports': 'ts', }, 'devextreme/localization.js': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', }, map: { 'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js', 'typescript': 'npm:typescript@4.2.4/lib/typescript.js', '@angular/core': 'npm:@angular/core@12.2.16', '@angular/platform-browser': 'npm:@angular/platform-browser@12.2.16', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@12.2.16', '@angular/forms': 'npm:@angular/forms@12.2.16', '@angular/common': 'npm:@angular/common@12.2.16', '@angular/compiler': 'npm:@angular/compiler@12.2.16', 'tslib': 'npm:tslib@2.3.1/tslib.js', 'rxjs': 'npm:rxjs@7.5.3/dist/bundles/rxjs.umd.js', 'rxjs/operators': 'npm:rxjs@7.5.3/dist/cjs/operators/index.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@22.1.3/cjs', 'devextreme/bundles/dx.all': 'npm:devextreme@22.1.3/bundles/dx.all.js', 'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.5.16/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.1.57', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.30', 'devextreme-angular': 'npm:devextreme-angular@22.1.3', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.7', 'inferno': 'npm:inferno@7.4.4/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat@7.4.11/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@7.4.11/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class@7.4.11/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras@7.4.11/dist/inferno-extras.min.js', }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts', }, 'devextreme': { defaultExtension: 'js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, 'rxjs': { defaultExtension: 'js', }, 'rxjs/operators': { defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.7/inferno/package.json', 'npm:@angular/*/package.json', 'npm:@angular/common@12.2.16/*/package.json', 'npm:rxjs@7.5.3/package.json', 'npm:rxjs@7.5.3/operators/package.json', 'npm:devextreme-angular@22.1.3/*/package.json', 'npm:devextreme-angular@22.1.3/ui/*/package.json', 'npm:devextreme-angular@22.1.3/package.json', 'npm:devexpress-diagram@2.1.57/package.json', 'npm:devexpress-gantt@4.1.30/package.json', ], }; System.config(window.config);
<!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" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.1.3/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.1.3/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.11.4/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script src="config.js"></script> <script> System.import("app").catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body> </html>