Yon can add a label template as
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' }
};
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.
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' }
};
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 { }
/**
* 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 }
]
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);