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

Drilldown with label in JavaScript TreeMap control

06 Jun 2023 / 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 treemap 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 { TreeMap, IDrillStartEventArgs } from '@syncfusion/ej2-treemap';
import { CarSales } from './datasource';

let treemap: TreeMap = new TreeMap({
  dataSource: CarSales,
  enableDrillDown: true,
  weightValuePath: 'Sales',
  palette: ["white"],
  levels: [
    {
      groupPath: 'Continent',
      border: { width: 0.5, color: 'black' }
    },
    {
      groupPath: 'Company',
      border: { width: 0.5, color: 'black' }
    },
  ]
}, '#container');

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
index.ts
index.html
Copied to clipboard
import { TreeMap, IDrillStartEventArgs } from '@syncfusion/ej2-treemap';
import { CarSales } from './datasource.ts';

let treemap: TreeMap = new TreeMap({
  dataSource: CarSales,
  enableDrillDown: true,
  weightValuePath: 'Sales',
  drillStart: function(args: IDrillStartEventArgs) {
    let labelElementGroup: HTMLElement = document.getElementById('container_Label_Template_Group');
    labelElementGroup.remove();
  },
  palette: ["white"],
  leafItemSettings: {
    showLabels: false,
    // Add label template here
    labelTemplate: '#template',
    // positioning the label template
    templatePosition: 'Center'
  },
  levels: [
    {
      groupPath: 'Continent',
      border: { width: 0.5, color: 'black' }
    },
    {
      groupPath: 'Company',
      border: { width: 0.5, color: 'black' }
    },
  ]
}, '#container');
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Essential JS 2 for Treemap </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for treemap UI Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
    </div>
</body>

</html>
Previous
Next