HelpBot Assistant

How can I help you?

Getting started with Angular TreeMap component

9 Feb 202624 minutes to read

This document explains the steps required to create and render a TreeMap component and demonstrates the component’s basic usage.

Setup Angular Environment

Prerequisites: Node.js (LTS) and npm must be installed before creating an Angular project.

Use the Angular CLI to create and manage Angular applications. Install the CLI with one of the following approaches depending on preference.

npm install -g @angular/cli

Note: Confirm that the installed Angular and Node.js versions meet project requirements before proceeding.

Create an Angular Application

Create a new Angular application with the Angular CLI:

ng new my-app
cd my-app

Adding Syncfusion^® TreeMap package

All the available Essential^® JS 2 packages are published in npmjs.com registry.

To install treemap component, use the following command.

npm install @syncfusion/ej2-angular-treemap --save

Note: For npm v5 and later, installed packages are added to dependencies by default. For earlier npm versions, include --save to add the package to dependencies.

Add TreeMap component

Modify the template in app.component.ts to render the ej2-angular-treemap component. The example below shows a minimal standalone component that mounts an empty TreeMap container.

import { TreeMapModule, TreeMapAllModule } from '@syncfusion/ej2-angular-treemap'
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
imports: [
      TreeMapModule, TreeMapAllModule
    ],
    standalone: true,
    selector: 'app-container',
  // specifies the template string for the treemap component
  template: `<ejs-treemap id='treemap-container'></ejs-treemap>`,
  encapsulation: ViewEncapsulation.None
})
export class AppComponent  { }

Now use the app-container in the index.html instead of default one.

<app-container></app-container>

Run the application with:

npm start

The following example shows a basic TreeMap component instance.

import { TreeMapModule, TreeMapAllModule } from '@syncfusion/ej2-angular-treemap'
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
imports: [
      TreeMapModule, TreeMapAllModule
    ],
    standalone: true,
    selector: 'app-root',
    // specifies the template string for the treemap component
    template: `<ejs-treemap id='treemap-container'></ejs-treemap>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent  { }

Since we did not specify dataSource for the TreeMap, no items will be rendered and only an empty SVG element will be appended to the treemap container.

Render TreeMap

This section shows how to render a TreeMap using a bound data source. The example visualizes the number of international airports in South America.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeMapModule, TreeMapLegendService, TreeMapTooltipService, TreeMapAllModule } from '@syncfusion/ej2-angular-treemap'



import { Component } from '@angular/core';

@Component({
imports: [
         TreeMapModule, TreeMapAllModule
    ],

providers: [TreeMapLegendService, TreeMapTooltipService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-treemap id='container' style='display: block;' height='350px' [dataSource]='data' weightValuePath='Count'
    [leafItemSettings]='leafItemSettings'>
    </ejs-treemap>`
})
export class AppComponent {
    public data: object[] = [
        { Title: 'State wise International Airport count in South America', State: 'Brazil', Count: 25 },
        { Title: 'State wise International Airport count in South America', State: 'Colombia', Count: 12 },
        { Title: 'State wise International Airport count in South America', State: 'Argentina', Count: 9 },
        { Title: 'State wise International Airport count in South America', State: 'Ecuador', Count: 7 },
        { Title: 'State wise International Airport count in South America', State: 'Chile', Count: 6 },
        { Title: 'State wise International Airport count in South America', State: 'Peru', Count: 3 },
        { Title: 'State wise International Airport count in South America', State: 'Venezuela', Count: 3 },
        { Title: 'State wise International Airport count in South America', State: 'Bolivia', Count: 2 },
        { Title: 'State wise International Airport count in South America', State: 'Paraguay', Count: 2 },
        { Title: 'State wise International Airport count in South America', State: 'Uruguay', Count: 2 },
        { Title: 'State wise International Airport count in South America', State: 'Falkland Islands',Count: 1 },
        { Title: 'State wise International Airport count in South America', State: 'French Guiana', Count:1 },
        { Title: 'State wise International Airport count in South America', State: 'Guyana', Count: 1 },
        { Title: 'State wise International Airport count in South America', State: 'Suriname', Count: 1 },
    ];
    public leafItemSettings: object = {
        labelPath: 'State'
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Here, TreeMap is displayed using a data source, and the weightValuePath property is set to the data source’s Count field as the value. The leaf level items of TreeMap can be customized using leafItemSettings. leafItemSettings allows you to change properties such as fill, border and labelPosition.

Module Injection

The TreeMap component is divided into individual feature-based modules. To use a specific feature, you must inject its Service module into the AppModule. The modules available in TreeMap, as well as their descriptions, are listed below.

TreeMapHighlightService - Inject this provider to use highlight feature.
TreeMapSelectionService - Inject this provider to use selection feature.
TreeMapLegendService - Inject this provider to use legend feature.
TreeMapTooltipService - Inject this provider to use tooltip feature.

Apply Color Mapping

The color mapping feature supports customization of item colors based on the underlying value of item received from bounded datasource. Specify the field name from which the values have to be compared for the item in equalColorValuePath or rangeColorValuePath property.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeMapModule, TreeMapLegendService, TreeMapTooltipService, TreeMapAllModule } from '@syncfusion/ej2-angular-treemap'




import { Component } from '@angular/core';

@Component({
imports: [
         TreeMapModule, TreeMapAllModule
    ],

providers: [TreeMapLegendService, TreeMapTooltipService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-treemap id='container' style='display: block;' height='350px' [dataSource]='data' [legendSettings]='legendSettings' equalColorValuePath='Count' weightValuePath='Count' [leafItemSettings]='leafItemSettings'>
    </ejs-treemap>`
})
export class AppComponent {
    public legendSettings: object = {
        visible: true,
    };
    public data: object[] = [
        { Title: 'State wise International Airport count in South America', State: 'Brazil', Count: 25 },
        { Title: 'State wise International Airport count in South America', State: 'Colombia', Count: 12 },
        { Title: 'State wise International Airport count in South America', State: 'Argentina', Count: 9 },
        { Title: 'State wise International Airport count in South America', State: 'Ecuador', Count: 7 },
        { Title: 'State wise International Airport count in South America', State: 'Chile', Count: 6 },
        { Title: 'State wise International Airport count in South America', State: 'Peru', Count: 3 },
        { Title: 'State wise International Airport count in South America', State: 'Venezuela', Count: 3 },
        { Title: 'State wise International Airport count in South America', State: 'Bolivia', Count: 2 },
        { Title: 'State wise International Airport count in South America', State: 'Paraguay', Count: 2 },
        { Title: 'State wise International Airport count in South America', State: 'Uruguay', Count: 2 },
        { Title: 'State wise International Airport count in South America', State: 'Falkland Islands',Count: 1 },
        { Title: 'State wise International Airport count in South America', State: 'French Guiana', Count:1 },
        { Title: 'State wise International Airport count in South America', State: 'Guyana', Count: 1 },
        { Title: 'State wise International Airport count in South America', State: 'Suriname', Count: 1 },
    ];
    public leafItemSettings: object = {
        labelPath: 'State',
        colorMapping: [
            {
                value: 25,
                color: '#634D6F'
            },
            {
                value: 12,
                color: '#B34D6D'
            },
            {
                value: 9,
                color: '#557C5C'
            },
            {
                value: 7,
                color: '#44537F'
            },
            {
                value: 6,
                color: '#637392'
            },
            {
                value: 3,
                color: '#7C754D'
            },
            {
                value: 2,
                color: '#2E7A64'
            },
            {
                value: 1,
                color: '#95659A'
            },
        ]
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Enable Legend

You can show legend for the TreeMap by setting true to the visible property in legendSettings object and by injecting the TreeMapLegendService module in the AppModule.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeMapModule, TreeMapLegendService, TreeMapAllModule } from '@syncfusion/ej2-angular-treemap'

import { Component } from '@angular/core';

@Component({
imports: [
         TreeMapModule, TreeMapAllModule
    ],

providers: [TreeMapLegendService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-treemap id='container' style='display: block;' [legendSettings]='legendSettings' [dataSource]='data' equalColorValuePath='Count' weightValuePath='Count' [leafItemSettings]='leafItemSettings'>
    </ejs-treemap>`
})
export class AppComponent {
    public legendSettings: object = {
        visible: true,
        position: 'Top',
        shape: 'Rectangle'
    };
    public data: object[] = [
        { Title: 'State wise International Airport count in South America', State: 'Brazil', Count: 25 },
        { Title: 'State wise International Airport count in South America', State: 'Colombia', Count: 12 },
        { Title: 'State wise International Airport count in South America', State: 'Argentina', Count: 9 },
        { Title: 'State wise International Airport count in South America', State: 'Ecuador', Count: 7 },
        { Title: 'State wise International Airport count in South America', State: 'Chile', Count: 6 },
        { Title: 'State wise International Airport count in South America', State: 'Peru', Count: 3 },
        { Title: 'State wise International Airport count in South America', State: 'Venezuela', Count: 3 },
        { Title: 'State wise International Airport count in South America', State: 'Bolivia', Count: 2 },
        { Title: 'State wise International Airport count in South America', State: 'Paraguay', Count: 2 },
        { Title: 'State wise International Airport count in South America', State: 'Uruguay', Count: 2 },
        { Title: 'State wise International Airport count in South America', State: 'Falkland Islands', Count: 1 },
        { Title: 'State wise International Airport count in South America', State: 'French Guiana', Count: 1 },
        { Title: 'State wise International Airport count in South America', State: 'Guyana', Count: 1 },
        { Title: 'State wise International Airport count in South America', State: 'Suriname', Count: 1 },
    ];
    public leafItemSettings: object = {
        labelPath: 'State',
        colorMapping: [
            {
                value: 25,
                color: '#634D6F'
            },
            {
                value: 12,
                color: '#B34D6D'
            },
            {
                value: 9,
                color: '#557C5C'
            },
            {
                value: 7,
                color: '#44537F'
            },
            {
                value: 6,
                color: '#637392'
            },
            {
                value: 3,
                color: '#7C754D'
            },
            {
                value: 2,
                color: '#2E7A64'
            },
            {
                value: 1,
                color: '#95659A'
            },
        ]
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Add Labels

Labels can be added to show additional information of the items in TreeMap. By default, visibility of the label is true. This can be customized using showLabels property in leafItemSettings.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeMapModule, TreeMapLegendService, TreeMapAllModule } from '@syncfusion/ej2-angular-treemap'


import { Component } from '@angular/core';

@Component({
imports: [
         TreeMapModule, TreeMapAllModule
    ],

providers: [TreeMapLegendService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-treemap id='container' style='display: block;' [legendSettings]='legendSettings' [dataSource]='data' equalColorValuePath='Count' weightValuePath='Count' [leafItemSettings]='leafItemSettings'>
    </ejs-treemap>`
})
export class AppComponent {
    public legendSettings: object = {
        visible: true,
        position: 'Top',
        shape: 'Rectangle'
    };
    public data: object[] = [
        { Title: 'State wise International Airport count in South America', State: 'Brazil', Count: 25 },
        { Title: 'State wise International Airport count in South America', State: 'Colombia', Count: 12 },
        { Title: 'State wise International Airport count in South America', State: 'Argentina', Count: 9 },
        { Title: 'State wise International Airport count in South America', State: 'Ecuador', Count: 7 },
        { Title: 'State wise International Airport count in South America', State: 'Chile', Count: 6 },
        { Title: 'State wise International Airport count in South America', State: 'Peru', Count: 3 },
        { Title: 'State wise International Airport count in South America', State: 'Venezuela', Count: 3 },
        { Title: 'State wise International Airport count in South America', State: 'Bolivia', Count: 2 },
        { Title: 'State wise International Airport count in South America', State: 'Paraguay', Count: 2 },
        { Title: 'State wise International Airport count in South America', State: 'Uruguay', Count: 2 },
        { Title: 'State wise International Airport count in South America', State: 'Falkland Islands', Count: 1 },
        { Title: 'State wise International Airport count in South America', State: 'French Guiana', Count: 1 },
        { Title: 'State wise International Airport count in South America', State: 'Guyana', Count: 1 },
        { Title: 'State wise International Airport count in South America', State: 'Suriname', Count: 1 },
    ];
    public leafItemSettings: object = {
        showLabels: true,
        labelPath: 'State',
        labelPosition: 'Center',
        labelStyle: {
            color: 'white'
        },
        colorMapping: [
            {
                value: 25,
                color: '#634D6F'
            },
            {
                value: 12,
                color: '#B34D6D'
            },
            {
                value: 9,
                color: '#557C5C'
            },
            {
                value: 7,
                color: '#44537F'
            },
            {
                value: 6,
                color: '#637392'
            },
            {
                value: 3,
                color: '#7C754D'
            },
            {
                value: 2,
                color: '#2E7A64'
            },
            {
                value: 1,
                color: '#95659A'
            },
        ]
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The tooltip is useful when labels cannot display information by using due to space constraints. Tooltip can be enabled by setting the visible property as true in tooltipSettings object and by injecting TreeMapTooltipService module in the AppModule.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeMapModule, TreeMapLegendService, TreeMapTooltipService, TreeMapAllModule } from '@syncfusion/ej2-angular-treemap'

import { Component } from '@angular/core';

@Component({
imports: [
         TreeMapModule, TreeMapAllModule
    ],

providers: [TreeMapLegendService, TreeMapTooltipService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-treemap id='container' style='display: block;' [tooltipSettings]='tooltipSettings' [legendSettings]='legendSettings' [dataSource]='data' equalColorValuePath='Count' weightValuePath='Count' [leafItemSettings]='leafItemSettings'>
    </ejs-treemap>`
})
export class AppComponent {
    public legendSettings: object = {
        visible: true,
        position: 'Top',
        shape: 'Rectangle'
    };
    public tooltipSettings: object = {
        visible: true,
    };
    public data: object[] = [
        { Title: 'State wise International Airport count in South America', State: 'Brazil', Count: 25 },
        { Title: 'State wise International Airport count in South America', State: 'Colombia', Count: 12 },
        { Title: 'State wise International Airport count in South America', State: 'Argentina', Count: 9 },
        { Title: 'State wise International Airport count in South America', State: 'Ecuador', Count: 7 },
        { Title: 'State wise International Airport count in South America', State: 'Chile', Count: 6 },
        { Title: 'State wise International Airport count in South America', State: 'Peru', Count: 3 },
        { Title: 'State wise International Airport count in South America', State: 'Venezuela', Count: 3 },
        { Title: 'State wise International Airport count in South America', State: 'Bolivia', Count: 2 },
        { Title: 'State wise International Airport count in South America', State: 'Paraguay', Count: 2 },
        { Title: 'State wise International Airport count in South America', State: 'Uruguay', Count: 2 },
        { Title: 'State wise International Airport count in South America', State: 'Falkland Islands', Count: 1 },
        { Title: 'State wise International Airport count in South America', State: 'French Guiana', Count: 1 },
        { Title: 'State wise International Airport count in South America', State: 'Guyana', Count: 1 },
        { Title: 'State wise International Airport count in South America', State: 'Suriname', Count: 1 },
    ];
    public leafItemSettings: object = {
        showLabels: true,
        labelPath: 'State',
        labelPosition: 'Center',
        labelStyle: {
            color: 'white'
        },
        colorMapping: [
            {
                value: 25,
                color: '#634D6F'
            },
            {
                value: 12,
                color: '#B34D6D'
            },
            {
                value: 9,
                color: '#557C5C'
            },
            {
                value: 7,
                color: '#44537F'
            },
            {
                value: 6,
                color: '#637392'
            },
            {
                value: 3,
                color: '#7C754D'
            },
            {
                value: 2,
                color: '#2E7A64'
            },
            {
                value: 1,
                color: '#95659A'
            },
        ]
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Search docs

Ask HelpBot

Search docs

Ask HelpBot

How can I help you?

Getting started with Angular TreeMap component

Setup Angular Environment

Create an Angular Application

Adding Syncfusion^® TreeMap package

Add TreeMap component

Render TreeMap

Module Injection

Apply Color Mapping

Enable Legend

Add Labels

Enable Tooltip

How can I help you?

Getting started with Angular TreeMap component

Setup Angular Environment

Create an Angular Application

Adding Syncfusion® TreeMap package

Add TreeMap component

Render TreeMap

Module Injection

Apply Color Mapping

Enable Legend

Add Labels

Enable Tooltip

Adding Syncfusion^® TreeMap package