Search results

Data Label in JavaScript (ES5) TreeMap control

26 Nov 2021 / 2 minutes to read

Data Labels are used to identify the name of items or groups in the TreeMap component. Data Labels will be shown by specifying the data source properties in the labelPath of the leafItemSettings.

Format

Customize the labels for each item using the labelFormat property in the leafItemSettings.

Source
Preview
index.js
index.html
Copied to clipboard
var treemap = new ej.treemap.TreeMap({
 dataSource: [{ Car:'Mustang', Brand:'Ford', count:232 },
                       { Car:'EcoSport', Brand:'Ford', count:121 },
                       { Car:'Swift', Brand:'Maruti', count:143 },
                       { Car:'Baleno', Brand:'Maruti', count:454 },
                       { Car:'Vitara Brezza', Brand:'Maruti', count:545 },
                       { Car:'A3 Cabriolet', Brand:'Audi',count:123 },
                       { car:'RS7 Sportback', Brand:'Audi', count:523 }
             ],
    weightValuePath: 'count',
    leafItemSettings: {
        labelPath: 'Car',
        labelFormat:'${Car}-${Brand}'
     }
}, '#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://cdn.syncfusion.com/ej2/dist/ej2.min.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>

Template

The template supports customizing labels of each leaf node using the labelTemplate property. It uses Essential JS2 template engine to render elements and the position of templates can be customize using the templatePosition property.

Source
Preview
index.js
index.html
Copied to clipboard
var treemap = new ej.treemap.TreeMap({
    dataSource: [
        { Car:'Mustang', Brand:'Ford', count:232 },
        { Car:'EcoSport', Brand:'Ford', count:121 },
        { Car:'Swift', Brand:'Maruti', count:143 },
        { Car:'Baleno', Brand:'Maruti', count:454 },
        { Car:'Vitara Brezza', Brand:'Maruti', count:545 },
        { Car:'A3 Cabriolet', Brand:'Audi',count:123 },
        { car:'RS7 Sportback', Brand:'Audi', count:523 }
    ],
    weightValuePath: 'count',
    leafItemSettings: {
        labelPath: 'Car',
        labelTemplate:'<div>{{:Car}}-{{:Brand}}</div>',
        templatePosition:'Center'
     }
}, '#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://cdn.syncfusion.com/ej2/dist/ej2.min.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>

InterSectAction

When the label size in each item exceeds the actual size, use the interSectAction property in the leafItemSettings to customise the labels.

Source
Preview
index.js
index.html
Copied to clipboard
var treemap = new ej.treemap.TreeMap({
    dataSource: [
        { Car:'Mustang', Brand:'Ford', count:232 },
        { Car:'EcoSport', Brand:'Ford', count:121 },
        { Car:'Swift', Brand:'Maruti', count:143 },
        { Car:'Baleno', Brand:'Maruti', count:454 },
        { Car:'Vitara Brezza', Brand:'Maruti', count:545 },
        { Car:'A3 Cabriolet Purvis Eureka LIoyd-Hartnett', Brand:'Audi',count:123 },
        { car:'RS7 Sportback', Brand:'Audi', count:523 }
             ],
    weightValuePath: 'count',
    leafItemSettings: {
        labelPath: 'Car',
        labelFormat:'${Car}-${Brand}',
        interSectAction:'WrapByWord'
     }
}, '#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://cdn.syncfusion.com/ej2/dist/ej2.min.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>