Tooltip in Angular Treemap component
27 Apr 20248 minutes to read
Tooltip is used to display details about the items in the TreeMap. When space constraints prevent us from displaying the information using Data Labels, the tooltip comes in handy.
Default tooltip
The tooltip is not visible by default, to make it visible, set the visible
property in the tooltipSettings
to true.
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;' [dataSource]='data' weightValuePath='count'
[leafItemSettings]='leafItemSettings' [tooltipSettings]='tooltipSettings'>
</ejs-treemap>`
})
export class AppComponent {
public data: object[] = [{ fruit:'Apple', count:5000 },
{ fruit:'Mango', count:3000 },
{ fruit:'Orange', count:2300 },
{ fruit:'Banana', count:500 },
{ fruit:'Grape', count:4300 },
{ fruit:'Papaya', count:1200 },
{ fruit:'Melon', count:4500 }
];
public leafItemSettings: object = {
labelPath: 'fruit'
};
public tooltipSettings: object = {
visible: true
};
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Format tooltip
The tooltip content is displayed by default based on the weightValuePath
. In addition, to show more information in the tooltip, use the format
property and define field from the data source as ${datafield}
.
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;' [dataSource]='data' weightValuePath='count'
[leafItemSettings]='leafItemSettings' [tooltipSettings]='tooltipSettings'>
</ejs-treemap>`
})
export class AppComponent {
public data: object[] = [{ fruit:'Apple', count:5000 },
{ fruit:'Mango', count:3000 },
{ fruit:'Orange', count:2300 },
{ fruit:'Banana', count:500 },
{ fruit:'Grape', count:4300 },
{ fruit:'Papaya', count:1200 },
{ fruit:'Melon', count:4500 }
];
public leafItemSettings: object = {
labelPath: 'fruit'
};
public tooltipSettings: object = {
visible: true,
format:'Name:${fruit} - TotalCount:${count}'
};
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Tooltip template
Tooltip can be rendered as a custom component using the template
property in the tooltipSettings
which accepts one or more UI elements as an input, that can be rendered as a part of the tooltip rendering. You can use ${datafield}
as placeholder in HTML element to display the values from data source.
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;' [dataSource]='data' weightValuePath='count'
[leafItemSettings]='leafItemSettings' [tooltipSettings]='tooltipSettings'>
</ejs-treemap>`
})
export class AppComponent {
public data: object[] = [{ fruit:'Apple', count:5000 },
{ fruit:'Mango', count:3000 },
{ fruit:'Orange', count:2300 },
{ fruit:'Banana', count:500 },
{ fruit:'Grape', count:4300 },
{ fruit:'Papaya', count:1200 },
{ fruit:'Melon', count:4500 }
];
public leafItemSettings: object = {
labelPath: 'fruit'
};
public tooltipSettings: object = {
visible: true,
template:'<div><p>Name: ${fruit}</p><p>Total Count: ${count}</p></div>'
};
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));