Layout in EJ2 JavaScript Treemap control

19 Apr 202314 minutes to read

Determine the visual representation of nodes belonging to all the TreeMap levels using the layoutType property.

Types of layout

The available layout types are,

Squarified
SliceAndDiceVertical
SliceAndDiceHorizontal
SliceAndDiceAuto

Squarified

The Squarified layout displays the nested rectangles based on aspect ratio in the TreeMap. The rectangles will be split based on the height and width of the parent. The default rendering type of layout is Squarified.

index.js
index.html
var treemap = new ej.treemap.TreeMap({
    dataSource: [
        {State:"United States", GDP:17946, percentage:11.08, Rank:1},
        {State:"China", GDP:10866, percentage: 28.42, Rank:2},
        {State:"Japan", GDP:4123, percentage:-30.78, Rank:3},
        {State:"Germany", GDP:3355, percentage:-5.19, Rank:4},
        {State:"United Kingdom", GDP:2848, percentage:8.28, Rank:5},
        {State:"France", GDP:2421, percentage:-9.69, Rank:6},
        {State:"India", GDP:2073, percentage:13.65, Rank:7},
        {State:"Italy", GDP:1814, percentage:-12.45, Rank:8},
        {State:"Brazil", GDP:1774, percentage:-27.88, Rank:9},
        {State:"Canada", GDP:1550, percentage:-15.02, Rank:10}
    ],
    weightValuePath: 'GDP',
    layoutType : 'Squarified'
}, '#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/29.1.33/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>

SliceAndDiceVertical

The SliceAndDiceVertical layout creates rectangles with high aspect ratio and displays items in a vertically sorted order.

index.js
index.html
var treemap = new ej.treemap.TreeMap({
        dataSource: [
                {State:"United States", GDP:17946, percentage:11.08, Rank:1},
                {State:"China", GDP:10866, percentage: 28.42, Rank:2},
                {State:"Japan", GDP:4123, percentage:-30.78, Rank:3},
                {State:"Germany", GDP:3355, percentage:-5.19, Rank:4},
                {State:"United Kingdom", GDP:2848, percentage:8.28, Rank:5},
                {State:"France", GDP:2421, percentage:-9.69, Rank:6},
                {State:"India", GDP:2073, percentage:13.65, Rank:7},
                {State:"Italy", GDP:1814, percentage:-12.45, Rank:8},
                {State:"Brazil", GDP:1774, percentage:-27.88, Rank:9},
                {State:"Canada", GDP:1550, percentage:-15.02, Rank:10}
        ],
        layoutType : 'SliceAndDiceVertical',
        weightValuePath: 'GDP'
}, '#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/29.1.33/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>

SliceAndDiceHorizontal

The SliceAndDiceHorizontal layout creates rectangles with high aspect ratio and displays items in a horizontally sorted order.

index.js
index.html
var treemap = new ej.treemap.TreeMap({
        dataSource: [
                {State:"United States", GDP:17946, percentage:11.08, Rank:1},
                {State:"China", GDP:10866, percentage: 28.42, Rank:2},
                {State:"Japan", GDP:4123, percentage:-30.78, Rank:3},
                {State:"Germany", GDP:3355, percentage:-5.19, Rank:4},
                {State:"United Kingdom", GDP:2848, percentage:8.28, Rank:5},
                {State:"France", GDP:2421, percentage:-9.69, Rank:6},
                {State:"India", GDP:2073, percentage:13.65, Rank:7},
                {State:"Italy", GDP:1814, percentage:-12.45, Rank:8},
                {State:"Brazil", GDP:1774, percentage:-27.88, Rank:9},
                {State:"Canada", GDP:1550, percentage:-15.02, Rank:10}
        ],
        layoutType : 'SliceAndDiceHorizontal',
        weightValuePath: 'GDP'
}, '#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/29.1.33/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>

SliceAndDiceAuto

The SliceAndDiceAuto layout creates rectangles with high aspect ratio and display items sorted both horizontally and vertically.

index.js
index.html
var treemap = new ej.treemap.TreeMap({
        dataSource: [
                {State:"United States", GDP:17946, percentage:11.08, Rank:1},
                {State:"China", GDP:10866, percentage: 28.42, Rank:2},
                {State:"Japan", GDP:4123, percentage:-30.78, Rank:3},
                {State:"Germany", GDP:3355, percentage:-5.19, Rank:4},
                {State:"United Kingdom", GDP:2848, percentage:8.28, Rank:5},
                {State:"France", GDP:2421, percentage:-9.69, Rank:6},
                {State:"India", GDP:2073, percentage:13.65, Rank:7},
                {State:"Italy", GDP:1814, percentage:-12.45, Rank:8},
                {State:"Brazil", GDP:1774, percentage:-27.88, Rank:9},
                {State:"Canada", GDP:1550, percentage:-15.02, Rank:10}
        ],
        layoutType : 'SliceAndDiceAuto',
        weightValuePath: 'GDP'
}, '#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/29.1.33/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>