Getting started with Angular Treemap component
11 Jul 202424 minutes to read
This section explains you the steps required to create a TreeMap control and demonstrate the basic usage of the TreeMap control.
Setup Angular Environment
You can use Angular CLI
to setup your Angular applications.
To install Angular CLI use the following command.
npm install -g @angular/cli
Create an Angular Application
Start a new Angular application using below Angular CLI command.
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
The –save will instruct NPM to include the treemap package inside of the
dependencies
section of thepackage.json
.
Add TreeMap component
Modify the template in app.component.ts
file to render the ej2-angular-treemap
component [src/app/app.component.ts]
.
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 { }
Now use the app-container
in the index.html instead of default one.
<app-container></app-container>
- Now run the application in the browser using the below command.
npm start
The below example shows a basic treemap.
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 explains how to render a TreeMap with a data source. In this example, we are going to modify the above basic treemap to visualize international airport count 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, 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.
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.
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.
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));
Enable Tooltip
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.
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));