Search results

Selection and Highlight

Selection

Selection is used to select a particular group or item to differentiate from other items. Each item or group can be selected and deselected when interacting with the items.

By tapping on the specific legend, the treemap items which are bounded to the selected legend is also selected and vice versa.

The layer selectionSettings.fill property is used to change the selected item color. The selectionSettings.border.color and selectionSettings.border.width properties are used to customize the selected item’s border.

The selection is enabled using the selectionSettings.enable property. To use selection feature in tree map, import the TreeMapSelection, and inject using the TreeMap.Inject(TreeMapSelection);.

Tree map selection is shown in the following example.

Source
Preview
index.html
index.css
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 TreeMap</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

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


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

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

#container {
    display: block;
    height: 350px;
}

Highlight

Highlight is used to highlight an item or group from other items. Each item or group can be highlighted when hovering the mouse over items.

Hovering on the specific legend, the treemap items which are bounded to the selected legend is also highlighted and vice versa.

The layer highlightSettings.fill property is used to change the highlighted item color. The highlightSettings.border.color and highlightSettings.border.width properties are used to customize the highlighted shape border. You can highlight an item by hovering the mouse over the item. The highlight is enabled using the highlightSettings.enable property.

The following code example shows highlighting the item.

Source
Preview
index.html
index.css
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 TreeMap</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

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


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

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

#container {
    display: block;
    height: 350px;
}