Drilldown with label in React Treemap component
3 Mar 202310 minutes to read
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 tree map 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 tree map drilldown, follow the given steps:
Step 1:
Create a treemap 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';
export function App() {
return (
<TreeMapComponent weightValuePath='Sales' palette={['white']} enableDrillDown={true} dataSource={CarSales}
leafItemSettings={ {
showLabels: false,
labelTemplate: '<div style="background-color: red">{{:Company}}</div>',
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>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);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 = [
{ 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 }
];/**
* 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';
export function App() {
function drillStart(args) {
var labelElementGroup = document.getElementById('container_Label_Template_Group');
labelElementGroup.remove();
}
return (
<TreeMapComponent drillStart={drillStart} weightValuePath='Sales' palette={['white']} enableDrillDown={true} dataSource={CarSales}
leafItemSettings={ {
showLabels: false,
labelTemplate: '<div style="background-color: red">{{:Company}}</div>',
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>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);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';
export function App() {
function drillStart(args: IDrillStartEventArgs): void {
let labelElementGroup: HTMLElement = document.getElementById('container_Label_Template_Group') as HTMLElement;
labelElementGroup.remove();
}
return (
<TreeMapComponent drillStart={drillStart} weightValuePath='Sales' palette={['white']} enableDrillDown={true} dataSource={CarSales}
leafItemSettings={ {
showLabels: false,
labelTemplate: '<div style="background-color: red"></div>',
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>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);