Drilldown with label in Angular Treemap component
Yon can add a label template as <div> element to the treemap control when using the label template. To add a label template to the treemap control, you have to hide another labels by setting the showLabels property to false in leafItemSettings to show only the label template.
To add label template to treemap drilldown, follow the given steps:
Step 1:
Create a tree map control and enable the drill-down option.
import { Component, ViewEncapsulation } from '@angular/core';
import { TreeMap, IDrillStartEventArgs } from '@syncfusion/ej2-angular-treemap';
import { CarSales } from './datasource';
/**
* Default sample
*/
@Component({
selector: 'app-container',
template:'<ejs-treemap id="container" #treemap style="display:block;" [dataSource]="dataSource" [weightValuePath]="weightValuePath"enableDrillDown="true" [palette]="palette"><e-levels><e-level groupPath="Continent" [border]="border"></e-level><e-level groupPath="Company" [border]="border"> </e-level></e-levels></ejs-treemap>',
encapsulation: ViewEncapsulation.None
})
export class TreemapDrillDownComponent {
public weightValuePath: string = "Sales";
public palette: string[] = ['white'];
public dataSource: object[] = CarSales;
public border: Object = { width: 0.5, color: 'black' }
};Add Labels
Labels can be added to show additional information about the items in the TreeMap. By default, label visibility is true. This can be customized using the 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));Hide Default Labels
Add the label template in the leafItemSettings options, and then set the showLabels property to false to hide another labels and show only label template.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeMapModule, TreeMapAllModule } from '@syncfusion/ej2-angular-treemap'
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { TreeMap, IDrillStartEventArgs } from '@syncfusion/ej2-angular-treemap';
import { CarSales } from './datasource';
@Component({
imports: [
TreeMapModule, TreeMapAllModule
],
,
standalone: true,
selector: 'app-container',
template:'<ejs-treemap id="container" #treemap style="display:block;" [dataSource]="dataSource" [weightValuePath]="weightValuePath"[leafItemSettings]="leafItemSettings" enableDrillDown="true" (drillStart)="drillStart($event)"[palette]="palette"><e-levels><e-level groupPath="Continent" [border]="border"> </e-level> <e-level groupPath="Company" [border]="border"></e-level></e-levels></ejs-treemap>',
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
ngOnInit(): void {
throw new Error('Method not implemented.');
}
public drillStart = (args: IDrillStartEventArgs) => {
let labelElementGroup: HTMLElement = document.getElementById('container_Label_Template_Group') as HTMLElement;
labelElementGroup.remove();
}
public weightValuePath: string = "Sales";
public palette: string[] = ['white'];
public dataSource: object[] = CarSales;
public leafItemSettings: object = {
showLabels: false,
labelTemplate: '#template',
templatePosition: 'Center'
};
public border: Object = { width: 0.5, color: 'black' }
};import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));