Getting started with Angular TreeMap component

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

Prerequisites

Ensure your development environment meets the System Requirements for Syncfusion® Angular UI Components, which covers supported Node.js, Angular, and @syncfusion/ej2-angular-treemap versions.

You also need a modern code editor such as Visual Studio Code, Cursor, or Syncfusion® CodeStudio.

Angular 21 Standalone Architecture: Standalone components are the default in Angular 21. This guide uses the modern standalone architecture. If you need more information about the standalone architecture, refer to the Standalone Guide.

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 globally or use npx to run it on demand.

npm install -g @angular/cli
npx @angular/cli new my-app

Create an Angular Application

Create a new Angular application with the Angular CLI. Keep the defaults (the snippets in this guide use standalone components, which is the recommended approach for new projects).

ng new my-app
cd my-app

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

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 { Component, ViewEncapsulation } from '@angular/core';
import { TreeMapAllModule } from '@syncfusion/ej2-angular-treemap';

@Component({
    imports: [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 { }

Run the application

Run the following command to launch the development server and open the application in your default browser:

npm start

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 with Data

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

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, the TreeMap is displayed using a data source, and the weightValuePath property is set to the Count field of the data source as the weight value. The data fields used in this example are described below.

The leaf level items of the TreeMap can be customized using leafItemSettings. Common leafItemSettings properties include:

  • fill - Background color of the leaf.
  • border - Border configuration for the leaf.
  • labelPosition - Position of the label on the leaf (Center, TopLeft, BottomRight, etc.).
  • showLabels - Toggles label visibility.

Module Injection

The TreeMap component is divided into individual feature-based modules. To use a specific feature, you must inject its service provider. For standalone components, register services in the providers array of the component. For NgModule-based apps, add them to the providers array of AppModule. The available services 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.
import { Component, ViewEncapsulation } from '@angular/core';
import { TreeMapModule, TreeMapHighlightService, TreeMapSelectionService, TreeMapLegendService, TreeMapTooltipService } from '@syncfusion/ej2-angular-treemap';

@Component({
    imports: [TreeMapModule],
    standalone: true,
    selector: 'app-root',
    providers: [TreeMapHighlightService, TreeMapSelectionService, TreeMapLegendService, TreeMapTooltipService],
})
export class AppComponent { }

Troubleshooting

  • Empty TreeMap container - Verify that dataSource and weightValuePath are set, and that the field referenced by weightValuePath contains numeric values.
  • Feature not working (legend, tooltip, selection, highlight) - Ensure the matching service (TreeMapLegendService, TreeMapTooltipService, etc.) is registered in the providers array.
  • Build errors with standalone components - Make sure TreeMapAllModule is imported in the imports array of every standalone component that uses TreeMap directives.

See also