Search results

Levels in JavaScript (ES5) TreeMap control

You can give ‘n’ number of levels to the tree map. Each level can be separated using the [groupPath] property.

The following customization options are available to customize the tree map levels.

Group path

The [groupPath] property is used to separate each level in tree map. The GroupPath accepts a field in dataSource.

Source
Preview
index.js
index.html
var treemap = new ej.treemap.TreeMap({
  
 palette: ["#f44336", "#29b6f6", "#ab47bc", "#ffc107", "#5c6bc0", "#009688"],
    dataSource:  [
        { Category: 'Employees', Country: 'USA', JobDescription: 'Sales', JobGroup: 'Executive', EmployeesCount: 20 },
        { Category: 'Employees', Country: 'USA', JobDescription: 'Sales', JobGroup: 'Analyst', EmployeesCount: 30 },
        { Category: 'Employees', Country: 'USA', JobDescription: 'Marketing', EmployeesCount: 40 },
        { Category: 'Employees', Country: 'USA', JobDescription: 'Management', EmployeesCount: 80 },
        { Category: 'Employees', Country: 'India', JobDescription: 'Technical', JobGroup: 'Testers', EmployeesCount: 100 },
        { Category: 'Employees', Country: 'India', JobDescription: 'HR Executives', EmployeesCount: 30 },
        { Category: 'Employees', Country: 'India', JobDescription: 'Accounts', EmployeesCount: 40 },
        { Category: 'Employees', Country: 'Germany', JobDescription: 'Sales', JobGroup: 'Executive', EmployeesCount: 50 },
        { Category: 'Employees', Country: 'Germany', JobDescription: 'Sales', JobGroup: 'Analyst', EmployeesCount: 60 },
        { Category: 'Employees', Country: 'Germany', JobDescription: 'Marketing', EmployeesCount: 70 },
        { Category: 'Employees', Country: 'Germany', JobDescription: 'Technical', JobGroup: 'Testers', EmployeesCount: 80 },
        { Category: 'Employees', Country: 'Germany', JobDescription: 'Management', EmployeesCount: 10 },
        { Category: 'Employees', Country: 'Germany', JobDescription: 'Accounts', EmployeesCount: 20 },
        { Category: 'Employees', Country: 'UK', JobDescription: 'Technical', JobGroup: 'Testers', EmployeesCount: 30 },
        { Category: 'Employees', Country: 'UK', JobDescription: 'HR Executives', EmployeesCount: 50 },
        { Category: 'Employees', Country: 'UK', JobDescription: 'Accounts', EmployeesCount: 60 },
        { Category: 'Employees', Country: 'France', JobDescription: 'Technical', JobGroup: 'Testers', EmployeesCount: 70 },
        { Category: 'Employees', Country: 'France', JobDescription: 'Marketing', EmployeesCount: 100 }
    ],
    weightValuePath: 'EmployeesCount',
    levels: [
        { groupPath: 'Country', border: { color: 'black', width: 0.5 } },
        { groupPath: 'JobDescription', border: { color: 'black', width: 0.5 } },
        { groupPath: 'JobGroup', border: { color: 'black', width: 0.5 } }
    ]
}, '#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/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>

Group gap

The [groupGap] property is used to separate an item from every group or another item to differentiate the levels mentioned in the tree map.

Source
Preview
index.js
index.html
var treemap = new ej.treemap.TreeMap({
  
 palette: ["#f44336", "#29b6f6", "#ab47bc", "#ffc107", "#5c6bc0", "#009688"],
    dataSource:  [
        { Category: 'Employees', Country: 'USA', JobDescription: 'Sales', JobGroup: 'Executive', EmployeesCount: 20 },
        { Category: 'Employees', Country: 'USA', JobDescription: 'Sales', JobGroup: 'Analyst', EmployeesCount: 30 },
        { Category: 'Employees', Country: 'USA', JobDescription: 'Marketing', EmployeesCount: 40 },
        { Category: 'Employees', Country: 'USA', JobDescription: 'Management', EmployeesCount: 80 },
        { Category: 'Employees', Country: 'India', JobDescription: 'Technical', JobGroup: 'Testers', EmployeesCount: 100 },
        { Category: 'Employees', Country: 'India', JobDescription: 'HR Executives', EmployeesCount: 30 },
        { Category: 'Employees', Country: 'India', JobDescription: 'Accounts', EmployeesCount: 40 },
        { Category: 'Employees', Country: 'Germany', JobDescription: 'Sales', JobGroup: 'Executive', EmployeesCount: 50 },
        { Category: 'Employees', Country: 'Germany', JobDescription: 'Sales', JobGroup: 'Analyst', EmployeesCount: 60 },
        { Category: 'Employees', Country: 'Germany', JobDescription: 'Marketing', EmployeesCount: 70 },
        { Category: 'Employees', Country: 'Germany', JobDescription: 'Technical', JobGroup: 'Testers', EmployeesCount: 80 },
        { Category: 'Employees', Country: 'Germany', JobDescription: 'Management', EmployeesCount: 10 },
        { Category: 'Employees', Country: 'Germany', JobDescription: 'Accounts', EmployeesCount: 20 },
        { Category: 'Employees', Country: 'UK', JobDescription: 'Technical', JobGroup: 'Testers', EmployeesCount: 30 },
        { Category: 'Employees', Country: 'UK', JobDescription: 'HR Executives', EmployeesCount: 50 },
        { Category: 'Employees', Country: 'UK', JobDescription: 'Accounts', EmployeesCount: 60 },
        { Category: 'Employees', Country: 'France', JobDescription: 'Technical', JobGroup: 'Testers', EmployeesCount: 70 },
        { Category: 'Employees', Country: 'France', JobDescription: 'Marketing', EmployeesCount: 100 }
    ],
    weightValuePath: 'EmployeesCount',
    levels: [
        { groupPath: 'Country', groupGap:10, border: { color: 'black', width: 0.5 } },
        { groupPath: 'JobDescription', groupGap:10, border: { color: 'black', width: 0.5 } },
        { groupPath: 'JobGroup', groupGap:10, border: { color: 'black', width: 0.5 } }
    ]
}, '#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/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>

Header format and alignment

You can customize header using the [headerFormat] property in which fields are mapping from the dataSource. You can also align header using the [headerAlignment] property.

Source
Preview
index.js
index.html
var treemap = new ej.treemap.TreeMap({
  
 palette: ["#f44336", "#29b6f6", "#ab47bc", "#ffc107", "#5c6bc0", "#009688"],
    dataSource:  [
        { Category: 'Employees', Country: 'USA', JobDescription: 'Sales', JobGroup: 'Executive', EmployeesCount: 20 },
        { Category: 'Employees', Country: 'USA', JobDescription: 'Sales', JobGroup: 'Analyst', EmployeesCount: 30 },
        { Category: 'Employees', Country: 'USA', JobDescription: 'Marketing', EmployeesCount: 40 },
        { Category: 'Employees', Country: 'USA', JobDescription: 'Management', EmployeesCount: 80 },
        { Category: 'Employees', Country: 'India', JobDescription: 'Technical', JobGroup: 'Testers', EmployeesCount: 100 },
        { Category: 'Employees', Country: 'India', JobDescription: 'HR Executives', EmployeesCount: 30 },
        { Category: 'Employees', Country: 'India', JobDescription: 'Accounts', EmployeesCount: 40 },
        { Category: 'Employees', Country: 'Germany', JobDescription: 'Sales', JobGroup: 'Executive', EmployeesCount: 50 },
        { Category: 'Employees', Country: 'Germany', JobDescription: 'Sales', JobGroup: 'Analyst', EmployeesCount: 60 },
        { Category: 'Employees', Country: 'Germany', JobDescription: 'Marketing', EmployeesCount: 70 },
        { Category: 'Employees', Country: 'Germany', JobDescription: 'Technical', JobGroup: 'Testers', EmployeesCount: 80 },
        { Category: 'Employees', Country: 'Germany', JobDescription: 'Management', EmployeesCount: 10 },
        { Category: 'Employees', Country: 'Germany', JobDescription: 'Accounts', EmployeesCount: 20 },
        { Category: 'Employees', Country: 'UK', JobDescription: 'Technical', JobGroup: 'Testers', EmployeesCount: 30 },
        { Category: 'Employees', Country: 'UK', JobDescription: 'HR Executives', EmployeesCount: 50 },
        { Category: 'Employees', Country: 'UK', JobDescription: 'Accounts', EmployeesCount: 60 },
        { Category: 'Employees', Country: 'France', JobDescription: 'Technical', JobGroup: 'Testers', EmployeesCount: 70 },
        { Category: 'Employees', Country: 'France', JobDescription: 'Marketing', EmployeesCount: 100 }
    ],
    weightValuePath: 'EmployeesCount',
    levels: [
        { groupPath: 'Country', headerFormat:'${Country}-${EmployeesCount}',
        headerAlignment:'Center', border: { color: 'black', width: 0.5 } },
        { groupPath: 'JobDescription',headerFormat:'${JobDescription}-${EmployeesCount}', headerAlignment:'Far', border: { color: 'black', width: 0.5 } },
        { groupPath: 'JobGroup', headerAlignment:'Near',
        headerFormat:'${JobGroup}-${EmployeesCount}', border: { color: 'black', width: 0.5 } },
    ]
}, '#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/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>

Header height and style

You can customize the font color, family, weight, and size using the [headerStyle] property. Based on font size, the header height can be given using the [headerHeight] property.

Source
Preview
index.js
index.html
var treemap = new ej.treemap.TreeMap({
  
 palette: ["#f44336", "#29b6f6", "#ab47bc", "#ffc107", "#5c6bc0", "#009688"],
    dataSource:  [
        { Category: 'Employees', Country: 'USA', JobDescription: 'Sales', JobGroup: 'Executive', EmployeesCount: 20 },
        { Category: 'Employees', Country: 'USA', JobDescription: 'Sales', JobGroup: 'Analyst', EmployeesCount: 30 },
        { Category: 'Employees', Country: 'USA', JobDescription: 'Marketing', EmployeesCount: 40 },
        { Category: 'Employees', Country: 'USA', JobDescription: 'Management', EmployeesCount: 80 },
        { Category: 'Employees', Country: 'India', JobDescription: 'Technical', JobGroup: 'Testers', EmployeesCount: 100 },
        { Category: 'Employees', Country: 'India', JobDescription: 'HR Executives', EmployeesCount: 30 },
        { Category: 'Employees', Country: 'India', JobDescription: 'Accounts', EmployeesCount: 40 },
        { Category: 'Employees', Country: 'Germany', JobDescription: 'Sales', JobGroup: 'Executive', EmployeesCount: 50 },
        { Category: 'Employees', Country: 'Germany', JobDescription: 'Sales', JobGroup: 'Analyst', EmployeesCount: 60 },
        { Category: 'Employees', Country: 'Germany', JobDescription: 'Marketing', EmployeesCount: 70 },
        { Category: 'Employees', Country: 'Germany', JobDescription: 'Technical', JobGroup: 'Testers', EmployeesCount: 80 },
        { Category: 'Employees', Country: 'Germany', JobDescription: 'Management', EmployeesCount: 10 },
        { Category: 'Employees', Country: 'Germany', JobDescription: 'Accounts', EmployeesCount: 20 },
        { Category: 'Employees', Country: 'UK', JobDescription: 'Technical', JobGroup: 'Testers', EmployeesCount: 30 },
        { Category: 'Employees', Country: 'UK', JobDescription: 'HR Executives', EmployeesCount: 50 },
        { Category: 'Employees', Country: 'UK', JobDescription: 'Accounts', EmployeesCount: 60 },
        { Category: 'Employees', Country: 'France', JobDescription: 'Technical', JobGroup: 'Testers', EmployeesCount: 70 },
        { Category: 'Employees', Country: 'France', JobDescription: 'Marketing', EmployeesCount: 100 }
    ],
    weightValuePath: 'EmployeesCount',
    levels: [
        { groupPath: 'Country', headerHeight:35, headerStyle:{ size:'15px' }, border: { color: 'black', width: 0.5 } },
        { groupPath: 'JobDescription',headerHeight:45, headerStyle:{ size:'15px' }, border: { color: 'black', width: 0.5 } },
        { groupPath: 'JobGroup',headerHeight:40, headerStyle:{ size:'15px' }, border: { color: 'black', width: 0.5 } },
    ]
}, '#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/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>

Header template and position

The treemap header supports to customize header of each item using the [headerTemplate] property. It uses Essential JS2 Template engine to render the elements. You can position the template using the [templatePosition] property.

The template concepts are illustrated in the following example.

Source
Preview
index.js
index.html
var treemap = new ej.treemap.TreeMap({
  
 palette: ["#f44336", "#29b6f6", "#ab47bc", "#ffc107", "#5c6bc0", "#009688"],
    dataSource:  [
        { Category: 'Employees', Country: 'USA', JobDescription: 'Sales', JobGroup: 'Executive', EmployeesCount: 20 },
        { Category: 'Employees', Country: 'USA', JobDescription: 'Sales', JobGroup: 'Analyst', EmployeesCount: 30 },
        { Category: 'Employees', Country: 'USA', JobDescription: 'Marketing', EmployeesCount: 40 },
        { Category: 'Employees', Country: 'USA', JobDescription: 'Management', EmployeesCount: 80 },
        { Category: 'Employees', Country: 'India', JobDescription: 'Technical', JobGroup: 'Testers', EmployeesCount: 100 },
        { Category: 'Employees', Country: 'India', JobDescription: 'HR Executives', EmployeesCount: 30 },
        { Category: 'Employees', Country: 'India', JobDescription: 'Accounts', EmployeesCount: 40 },
        { Category: 'Employees', Country: 'Germany', JobDescription: 'Sales', JobGroup: 'Executive', EmployeesCount: 50 },
        { Category: 'Employees', Country: 'Germany', JobDescription: 'Sales', JobGroup: 'Analyst', EmployeesCount: 60 },
        { Category: 'Employees', Country: 'Germany', JobDescription: 'Marketing', EmployeesCount: 70 },
        { Category: 'Employees', Country: 'Germany', JobDescription: 'Technical', JobGroup: 'Testers', EmployeesCount: 80 },
        { Category: 'Employees', Country: 'Germany', JobDescription: 'Management', EmployeesCount: 10 },
        { Category: 'Employees', Country: 'Germany', JobDescription: 'Accounts', EmployeesCount: 20 },
        { Category: 'Employees', Country: 'UK', JobDescription: 'Technical', JobGroup: 'Testers', EmployeesCount: 30 },
        { Category: 'Employees', Country: 'UK', JobDescription: 'HR Executives', EmployeesCount: 50 },
        { Category: 'Employees', Country: 'UK', JobDescription: 'Accounts', EmployeesCount: 60 },
        { Category: 'Employees', Country: 'France', JobDescription: 'Technical', JobGroup: 'Testers', EmployeesCount: 70 },
        { Category: 'Employees', Country: 'France', JobDescription: 'Marketing', EmployeesCount: 100 }
    ],
    weightValuePath: 'EmployeesCount',
     levels: [
        { groupPath: 'Country', headerFormat:' ', headerTemplate:'<div>{{:Country}}- {{:EmployeesCount}}</div>',  border: { color: 'black', width: 0.5 } },{ groupPath: 'JobDescription', headerFormat:' ', headerTemplate:'<div>{{:JobDescription}}</div>',  border: { color: 'black', width: 0.5 } },
        { groupPath: 'JobGroup', headerFormat:' ', headerTemplate:'<div>{{:JobGroup}}</div>', border: { color: 'black', width: 0.5 } },
    ],
    leafItemSettings:{
      showLabels:false
    }
}, '#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/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>