React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Drilldown with label in React TreeMap component

30 Jun 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 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.

Copied to clipboard
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
);
Copied to clipboard
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.

Source
Preview
datasource.jsx
index.jsx
datasource.tsx
index.tsx
Copied to clipboard
/**
 * 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 }
];
Copied to clipboard
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'));
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 { 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
);
Previous
Next