/ TreeMap / How To / Drilldown with label
Search results

Drilldown with label in Angular TreeMap component

21 Dec 2022 / 2 minutes to read

Yon can add a label template as

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.

Copied to clipboard
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' }
};

Step 2:

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.

Copied to clipboard
import { Component, ViewEncapsulation } from '@angular/core';
import { TreeMap, IDrillStartEventArgs } from '@syncfusion/ej2-angular-treemap';
import { CarSales } from './datasource.ts';

@Component({
  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 {
  public drillStart = (args: IDrillStartEventArgs) => {
    let labelElementGroup: HTMLElement = document.getElementById('container_Label_Template_Group');
    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' }
};
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TreeMapModule, TreeMapAllModule } from '@syncfusion/ej2-angular-treemap';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, TreeMapModule, TreeMapAllModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
	providers: []
})
export class AppModule { }
Copied to clipboard
/**
 * Election data for US
 */
//tslint:disable
export let CarSales: object[] = [
    { Continent: "China", Company: "Volkswagen", Sales: 3005994 },
    { Continent: "China", Company: "General Motors", Sales: 1230044 },
    { Continent: "China", Company: "Honda", Sales: 1197023 },
    { Continent: "United States", Company: "General Motors", Sales: 3042775 },
    { Continent: "United States", Company: "Ford", Sales: 2599193 },
    { Continent: "United States", Company: "Toyota", Sales: 2449587 },
    { Continent: "Japan", Company: "Toyota", Sales: 1527977 },
    { Continent: "Japan", Company: "Honda", Sales: 706982 },
    { Continent: "Japan", Company: "Suzuki", Sales: 623041 },
    { Continent: "Germany", Company: "Volkswagen", Sales: 655977 },
    { Continent: "Germany", Company: "Mercedes", Sales: 310845 },
    { Continent: "Germany", Company: "BMW", Sales: 261931 },
    { Continent: "United Kingdom", Company: "Ford ", Sales: 319442 },
    { Continent: "United Kingdom", Company: "Vauxhall", Sales: 251146 },
    { Continent: "United Kingdom", Company: "Volkswagen", Sales: 206994 }
  ]
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);