Yon can add a label template as
showLabels property to false in leafItemSettings to show only the label template.
To add label template to tree map drilldown, follow the given steps:
Step 1:
Create a tree map control and enable the drill-down option.
import { TreeMapComponent, LevelDirective, LevelsDirective, ILoadedEventArgs, IDrillEndEventArgs } from '@syncfusion/ej2-react-treemap';
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { CarSales } from './datasource';
class App extends React.Component {
render() {
return (
<TreeMapComponent id='container' weightValuePath='Sales' palette={['white']} enableDrillDown={true} dataSource={CarSales}
leafItemSettings={ {
showLabels: false,
labelTemplate: '#template',
templatePosition: 'Center'
} }>
<LevelsDirective>
<LevelDirective groupPath='Continent' fill='#336699' border={ { color: 'black', width: 0.5 } } />
<LevelDirective groupPath='Company' fill='#336699' border={ { color: 'black', width: 0.5 } } />
</LevelsDirective>
</TreeMapComponent>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('treemap') as HTMLElement
);import { TreeMapComponent, LevelDirective, LevelsDirective } from '@syncfusion/ej2-react-treemap';
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { CarSales } from './datasource';
class App extends React.Component {
render() {
return (<TreeMapComponent id='container' weightValuePath='Sales' palette={['white']} enableDrillDown={true} dataSource={CarSales} leafItemSettings={{
showLabels: false,
labelTemplate: '#template',
templatePosition: 'Center'
}}>
<LevelsDirective>
<LevelDirective groupPath='Continent' fill='#336699' border={{ color: 'black', width: 0.5 }}/>
<LevelDirective groupPath='Company' fill='#336699' border={{ color: 'black', width: 0.5 }}/>
</LevelsDirective>
</TreeMapComponent>);
}
}
ReactDOM.render(<App />, document.getElementById('treemap'));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.
/**
* 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 { TreeMapComponent, LevelDirective, LevelsDirective, ILoadedEventArgs, IDrillEndEventArgs } from '@syncfusion/ej2-react-treemap';
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { CarSales } from './datasource';
class App extends React.Component {
public drillStart(args: IDrillStartEventArgs): void {
let labelElementGroup: HTMLElement = document.getElementById('container_Label_Template_Group') as HTMLElement;
labelElementGroup.remove();
}
render() {
return (
<TreeMapComponent drillStart={this.drillStart.bind(this)} id='container' weightValuePath='Sales' palette={['white']} enableDrillDown={true} dataSource={CarSales}
leafItemSettings={ {
showLabels: false,
labelTemplate: '#template',
templatePosition: 'Center'
} }>
<LevelsDirective>
<LevelDirective groupPath='Continent' fill='#336699' border={ { color: 'black', width: 0.5 } } />
<LevelDirective groupPath='Company' fill='#336699' border={ { color: 'black', width: 0.5 } } />
</LevelsDirective>
</TreeMapComponent>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('treemap') as HTMLElement
);import { TreeMapComponent, LevelDirective, LevelsDirective } from '@syncfusion/ej2-react-treemap';
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { CarSales } from './datasource';
class App extends React.Component {
drillStart(args) {
let labelElementGroup = document.getElementById('container_Label_Template_Group');
labelElementGroup.remove();
}
render() {
return (<TreeMapComponent drillStart={this.drillStart.bind(this)} id='container' weightValuePath='Sales' palette={['white']} enableDrillDown={true} dataSource={CarSales} leafItemSettings={{
showLabels: false,
labelTemplate: '#template',
templatePosition: 'Center'
}}>
<LevelsDirective>
<LevelDirective groupPath='Continent' fill='#336699' border={{ color: 'black', width: 0.5 }}/>
<LevelDirective groupPath='Company' fill='#336699' border={{ color: 'black', width: 0.5 }}/>
</LevelsDirective>
</TreeMapComponent>);
}
}
ReactDOM.render(<App />, document.getElementById('treemap'));