Drilldown with label in EJ2 JavaScript Treemap control

19 Apr 20235 minutes to read

Yon can add a label template as <div> element to the tree map 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 tree map control and enable the drill-down option.

var treemap = new ej.treemap.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.

var treemap = new ej.treemap.TreeMap({
    dataSource: [
        { 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 }
    ],
  enableDrillDown: true,
  weightValuePath: 'Sales',
  drillStart: function(args) {
    var labelElementGroup = document.getElementById('container_Label_Template_Group');
    labelElementGroup.remove();
  },
  palette: ["white"],
  leafItemSettings: {
    showLabels: false,
    labelTemplate: '<div style="background-color: red"></div>',
    templatePosition: 'Center'
  },
  levels: [
    {
      groupPath: 'Continent',
      border: { width: 0.5, color: 'black' }
    },
    {
      groupPath: 'Company',
      border: { width: 0.5, color: 'black' }
    },
  ]
}, '#container');
<!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://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>