This section explains you the steps required to create a TreeMap control and demonstrate the basic usage of the TreeMap control.
You can use Angular CLI
to setup your Angular applications.
To install Angular CLI use the following command.
npm install -g @angular/cli
Start a new Angular application using below Angular CLI command.
ng new my-app
cd my-app
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
.
Import TreeMap module into Angular application(app.module.ts) from the package @syncfusion/ej2-angular-treemap
[src/app/app.module.ts].
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// import the TreeMapModule for the TreeMap component
import { TreeMapModule } from '@syncfusion/ej2-angular-treemap';
import { AppComponent } from './app.component';
@NgModule({
//declaration of chart module into NgModule
imports: [ BrowserModule, TreeMapModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
app.component.ts
file to render the ej2-angular-treemap
component
[src/app/app.component.ts]
.import { Component, ViewEncapsulation } from '@angular/core';
@Component({
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>
npm start
The below example shows a basic map.
import { Component } from '@angular/core';
@Component({
selector: 'app-container',
// specifies the template string for the treemap component
template: `<ejs-treemap id="treemap-container"></ejs-treemap>`
})
export class AppComponent {
}
As we didn’t specify shapeData to the treemap, no shape will be rendered and only an empty SVG element is appended to the treemap container.
TreeMap component is segregated into individual feature-wise modules. In order to use a particular feature, you need to inject its feature Service in the AppModule. Find the modules available in TreeMap and its description as follows.
In the current application, we are going to modify the above basic treemap to visualize international airport count in South America.
In this demo, we are just rendering TreeMap with labels. For this there is no need to import any modules.
This session explains how to render TreeMap with datasource.
import { Component } from '@angular/core';
@Component({
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 { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TreeMapModule, TreeMapLegendService, TreeMapTooltipService, TreeMapAllModule } from '@syncfusion/ej2-angular-treemap';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, TreeMapModule, TreeMapAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [TreeMapLegendService, TreeMapTooltipService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Here TreeMap is created with the datasource and set [weightValuePath
] as Count field in the datasouce. You can customize the leaf level TreeMap items using [leafItemSettings
]. Properties like [fill
], [border
], [labelPosition
] can be changed using [leafItemSettings
].
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 { Component } from '@angular/core';
@Component({
selector: 'app-container',
template: `<ejs-treemap id='container' style='display: block;' height='350px' [dataSource]='data' equalColorValuePath='Count' 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',
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 { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TreeMapModule, TreeMapLegendService, TreeMapTooltipService, TreeMapAllModule } from '@syncfusion/ej2-angular-treemap';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, TreeMapModule, TreeMapAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [TreeMapLegendService, TreeMapTooltipService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
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 { Component } from '@angular/core';
@Component({
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'
},
]
};
}
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 { Component } from '@angular/core';
@Component({
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'
},
]
};
}
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 { Component } from '@angular/core';
@Component({
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'
},
]
};
}