Events in EJ2 TypeScript HeatMap chart control

7 Jul 202324 minutes to read

This section describes the HeatMap chart control event, which occurs when the required actions are performed.

cellClick

When you click on a HeatMap cell, the cellClick event is triggered. To know more about arguments of this event, refer here.

import { HeatMap, Tooltip, Legend } from '@syncfusion/ej2-heatmap';
HeatMap.Inject(Tooltip, Legend);

let heatmapData: any [] = [
    [73, 39, 26, 39, 94, 0],
    [93, 58, 53, 38, 26, 68],
    [99, 28, 22, 4, 66, 90],
    [14, 26, 97, 69, 69, 3],
    [7, 46, 47, 47, 88, 6],
    [41, 55, 73, 23, 3, 79],
    [56, 69, 21, 86, 3, 33],
    [45, 7, 53, 81, 95, 79],
    [60, 77, 74, 68, 88, 51],
    [25, 25, 10, 12, 78, 14],
    [25, 56, 55, 58, 12, 82],
    [74, 33, 88, 23, 86, 59]];

let heatmap: HeatMap = new HeatMap({
    cellClick: function(args) {
        console.log('The cell click event has been triggered!!!', args);
    },
     titleSettings: {
             text: 'Sales Revenue per Employee (in 1000 US$)',
             textStyle: {
                 size: '15px',
                 fontWeight: '500',
                 fontStyle: 'Normal',
                 fontFamily: 'Segoe UI'
             }
     },
     xAxis: {
         labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 
                 'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin',   'Mario'],
     },
     yAxis: {
         labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
     },
     dataSource: heatmapData,
});
heatmap.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 HeatMap</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" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

cellDoubleClick

When you double click on a HeatMap cell, the cellDoubleClick event is triggered. To know more about arguments of this event, refer here.

import { HeatMap, Tooltip, Legend } from '@syncfusion/ej2-heatmap';
HeatMap.Inject(Tooltip, Legend);

let heatmapData: any [] = [
    [73, 39, 26, 39, 94, 0],
    [93, 58, 53, 38, 26, 68],
    [99, 28, 22, 4, 66, 90],
    [14, 26, 97, 69, 69, 3],
    [7, 46, 47, 47, 88, 6],
    [41, 55, 73, 23, 3, 79],
    [56, 69, 21, 86, 3, 33],
    [45, 7, 53, 81, 95, 79],
    [60, 77, 74, 68, 88, 51],
    [25, 25, 10, 12, 78, 14],
    [25, 56, 55, 58, 12, 82],
    [74, 33, 88, 23, 86, 59]];

let heatmap: HeatMap = new HeatMap({
    cellDoubleClick: function(args) {
        console.log('The cell double click event has been triggered!!!', args);
    },
     titleSettings: {
             text: 'Sales Revenue per Employee (in 1000 US$)',
             textStyle: {
                 size: '15px',
                 fontWeight: '500',
                 fontStyle: 'Normal',
                 fontFamily: 'Segoe UI'
             }
     },
     xAxis: {
         labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 
                 'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin',   'Mario'],
     },
     yAxis: {
         labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
     },
     dataSource: heatmapData,
});
heatmap.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 HeatMap</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" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

cellRender

The cellRender event will be triggered before each HeatMap cell is rendered. To know more about arguments of this event, refer here.

import { HeatMap, Tooltip, Legend } from '@syncfusion/ej2-heatmap';
HeatMap.Inject(Tooltip, Legend);

let heatmapData: any [] = [
    [73, 39, 26, 39, 94, 0],
    [93, 58, 53, 38, 26, 68],
    [99, 28, 22, 4, 66, 90],
    [14, 26, 97, 69, 69, 3],
    [7, 46, 47, 47, 88, 6],
    [41, 55, 73, 23, 3, 79],
    [56, 69, 21, 86, 3, 33],
    [45, 7, 53, 81, 95, 79],
    [60, 77, 74, 68, 88, 51],
    [25, 25, 10, 12, 78, 14],
    [25, 56, 55, 58, 12, 82],
    [74, 33, 88, 23, 86, 59]];

let heatmap: HeatMap = new HeatMap({
    cellRender: function(args) {
        console.log('The cell render event has been triggered!!!', args);
    },
     titleSettings: {
             text: 'Sales Revenue per Employee (in 1000 US$)',
             textStyle: {
                 size: '15px',
                 fontWeight: '500',
                 fontStyle: 'Normal',
                 fontFamily: 'Segoe UI'
             }
     },
     xAxis: {
         labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 
                 'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin',   'Mario'],
     },
     yAxis: {
         labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
     },
     dataSource: heatmapData,
});
heatmap.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 HeatMap</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" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

cellSelected

When single or multiple cells in the HeatMap are selected, the cellSelected event is triggered. To know more about arguments of this event, refer here.

import { HeatMap, Tooltip, Legend } from '@syncfusion/ej2-heatmap';
HeatMap.Inject(Tooltip, Legend);

let heatmapData: any [] = [
    [73, 39, 26, 39, 94, 0],
    [93, 58, 53, 38, 26, 68],
    [99, 28, 22, 4, 66, 90],
    [14, 26, 97, 69, 69, 3],
    [7, 46, 47, 47, 88, 6],
    [41, 55, 73, 23, 3, 79],
    [56, 69, 21, 86, 3, 33],
    [45, 7, 53, 81, 95, 79],
    [60, 77, 74, 68, 88, 51],
    [25, 25, 10, 12, 78, 14],
    [25, 56, 55, 58, 12, 82],
    [74, 33, 88, 23, 86, 59]];

let heatmap: HeatMap = new HeatMap({
    cellSelected: function(args) {
        console.log('The cell selected event has been triggered!!!', args);
    },
     titleSettings: {
             text: 'Sales Revenue per Employee (in 1000 US$)',
             textStyle: {
                 size: '15px',
                 fontWeight: '500',
                 fontStyle: 'Normal',
                 fontFamily: 'Segoe UI'
             }
     },
     xAxis: {
         labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 
                 'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin',   'Mario'],
     },
     yAxis: {
         labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
     },
     allowSelection: true,
     dataSource: heatmapData,
});
heatmap.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 HeatMap</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" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

created

Once HeatMap has been completely rendered, the created event is triggered.

import { HeatMap, Tooltip, Legend } from '@syncfusion/ej2-heatmap';
HeatMap.Inject(Tooltip, Legend);

let heatmapData: any [] = [
    [73, 39, 26, 39, 94, 0],
    [93, 58, 53, 38, 26, 68],
    [99, 28, 22, 4, 66, 90],
    [14, 26, 97, 69, 69, 3],
    [7, 46, 47, 47, 88, 6],
    [41, 55, 73, 23, 3, 79],
    [56, 69, 21, 86, 3, 33],
    [45, 7, 53, 81, 95, 79],
    [60, 77, 74, 68, 88, 51],
    [25, 25, 10, 12, 78, 14],
    [25, 56, 55, 58, 12, 82],
    [74, 33, 88, 23, 86, 59]];

let heatmap: HeatMap = new HeatMap({
    created: function(args) {
        console.log('The created event has been triggered!!!');
    },
     titleSettings: {
             text: 'Sales Revenue per Employee (in 1000 US$)',
             textStyle: {
                 size: '15px',
                 fontWeight: '500',
                 fontStyle: 'Normal',
                 fontFamily: 'Segoe UI'
             }
     },
     xAxis: {
         labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 
                 'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin',   'Mario'],
     },
     yAxis: {
         labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
     },
     dataSource: heatmapData,
});
heatmap.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 HeatMap</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" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

legendRender

The legendRender event is triggered before the legend is rendered. To know more about arguments of this event, refer here.

import { HeatMap, Tooltip, Legend } from '@syncfusion/ej2-heatmap';
HeatMap.Inject(Tooltip, Legend);

let heatmapData: any [] = [
    [73, 39, 26, 39, 94, 0],
    [93, 58, 53, 38, 26, 68],
    [99, 28, 22, 4, 66, 90],
    [14, 26, 97, 69, 69, 3],
    [7, 46, 47, 47, 88, 6],
    [41, 55, 73, 23, 3, 79],
    [56, 69, 21, 86, 3, 33],
    [45, 7, 53, 81, 95, 79],
    [60, 77, 74, 68, 88, 51],
    [25, 25, 10, 12, 78, 14],
    [25, 56, 55, 58, 12, 82],
    [74, 33, 88, 23, 86, 59]];

let heatmap: HeatMap = new HeatMap({
    legendRender: function(args) {
        console.log('The legend render event has been triggered!!!', args);
    },
     titleSettings: {
             text: 'Sales Revenue per Employee (in 1000 US$)',
             textStyle: {
                 size: '15px',
                 fontWeight: '500',
                 fontStyle: 'Normal',
                 fontFamily: 'Segoe UI'
             }
     },
     xAxis: {
         labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 
                 'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin',   'Mario'],
     },
     yAxis: {
         labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
     },
     dataSource: heatmapData,
});
heatmap.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 HeatMap</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" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

load

The load event is triggered before the HeatMap is rendered. To know more about arguments of this event, refer here.

import { HeatMap, Tooltip, Legend } from '@syncfusion/ej2-heatmap';
HeatMap.Inject(Tooltip, Legend);

let heatmapData: any [] = [
    [73, 39, 26, 39, 94, 0],
    [93, 58, 53, 38, 26, 68],
    [99, 28, 22, 4, 66, 90],
    [14, 26, 97, 69, 69, 3],
    [7, 46, 47, 47, 88, 6],
    [41, 55, 73, 23, 3, 79],
    [56, 69, 21, 86, 3, 33],
    [45, 7, 53, 81, 95, 79],
    [60, 77, 74, 68, 88, 51],
    [25, 25, 10, 12, 78, 14],
    [25, 56, 55, 58, 12, 82],
    [74, 33, 88, 23, 86, 59]];

let heatmap: HeatMap = new HeatMap({
    load: function(args) {
        console.log('The load event has been triggered!!!', args);
    },
     titleSettings: {
             text: 'Sales Revenue per Employee (in 1000 US$)',
             textStyle: {
                 size: '15px',
                 fontWeight: '500',
                 fontStyle: 'Normal',
                 fontFamily: 'Segoe UI'
             }
     },
     xAxis: {
         labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 
                 'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin',   'Mario'],
     },
     yAxis: {
         labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
     },
     dataSource: heatmapData,
});
heatmap.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 HeatMap</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" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

loaded

Once HeatMap is loaded, the loaded event is triggered. To know more about arguments of this event, refer here.

import { HeatMap, Tooltip, Legend } from '@syncfusion/ej2-heatmap';
HeatMap.Inject(Tooltip, Legend);

let heatmapData: any [] = [
    [73, 39, 26, 39, 94, 0],
    [93, 58, 53, 38, 26, 68],
    [99, 28, 22, 4, 66, 90],
    [14, 26, 97, 69, 69, 3],
    [7, 46, 47, 47, 88, 6],
    [41, 55, 73, 23, 3, 79],
    [56, 69, 21, 86, 3, 33],
    [45, 7, 53, 81, 95, 79],
    [60, 77, 74, 68, 88, 51],
    [25, 25, 10, 12, 78, 14],
    [25, 56, 55, 58, 12, 82],
    [74, 33, 88, 23, 86, 59]];

let heatmap: HeatMap = new HeatMap({
    loaded: function(args) {
        console.log('The loaded event has been triggered!!!', args);
    },
     titleSettings: {
             text: 'Sales Revenue per Employee (in 1000 US$)',
             textStyle: {
                 size: '15px',
                 fontWeight: '500',
                 fontStyle: 'Normal',
                 fontFamily: 'Segoe UI'
             }
     },
     xAxis: {
         labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 
                 'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin',   'Mario'],
     },
     yAxis: {
         labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
     },
     dataSource: heatmapData,
});
heatmap.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 HeatMap</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" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

resized

When the window is resized, the resized event is triggered to notify the resize of the HeatMap. To know more about arguments of this event, refer here.

import { HeatMap, Tooltip, Legend } from '@syncfusion/ej2-heatmap';
HeatMap.Inject(Tooltip, Legend);

let heatmapData: any [] = [
    [73, 39, 26, 39, 94, 0],
    [93, 58, 53, 38, 26, 68],
    [99, 28, 22, 4, 66, 90],
    [14, 26, 97, 69, 69, 3],
    [7, 46, 47, 47, 88, 6],
    [41, 55, 73, 23, 3, 79],
    [56, 69, 21, 86, 3, 33],
    [45, 7, 53, 81, 95, 79],
    [60, 77, 74, 68, 88, 51],
    [25, 25, 10, 12, 78, 14],
    [25, 56, 55, 58, 12, 82],
    [74, 33, 88, 23, 86, 59]];

let heatmap: HeatMap = new HeatMap({
    resized: function(args) {
        console.log('The resized event has been triggered!!!', args);
    },
     titleSettings: {
             text: 'Sales Revenue per Employee (in 1000 US$)',
             textStyle: {
                 size: '15px',
                 fontWeight: '500',
                 fontStyle: 'Normal',
                 fontFamily: 'Segoe UI'
             }
     },
     xAxis: {
         labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 
                 'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin',   'Mario'],
     },
     yAxis: {
         labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
     },
     dataSource: heatmapData,
});
heatmap.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 HeatMap</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" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

tooltipRender

The tooltipRender event is triggered before the tooltip is rendered on the HeatMap cell. To know more about arguments of this event, refer here.

import { HeatMap, Tooltip, Legend } from '@syncfusion/ej2-heatmap';
HeatMap.Inject(Tooltip, Legend);

let heatmapData: any [] = [
    [73, 39, 26, 39, 94, 0],
    [93, 58, 53, 38, 26, 68],
    [99, 28, 22, 4, 66, 90],
    [14, 26, 97, 69, 69, 3],
    [7, 46, 47, 47, 88, 6],
    [41, 55, 73, 23, 3, 79],
    [56, 69, 21, 86, 3, 33],
    [45, 7, 53, 81, 95, 79],
    [60, 77, 74, 68, 88, 51],
    [25, 25, 10, 12, 78, 14],
    [25, 56, 55, 58, 12, 82],
    [74, 33, 88, 23, 86, 59]];

let heatmap: HeatMap = new HeatMap({
    tooltipRender: function(args) {
        console.log('The tooltip render event has been triggered!!!', args);
    },
     titleSettings: {
             text: 'Sales Revenue per Employee (in 1000 US$)',
             textStyle: {
                 size: '15px',
                 fontWeight: '500',
                 fontStyle: 'Normal',
                 fontFamily: 'Segoe UI'
             }
     },
     xAxis: {
         labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 
                 'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin',   'Mario'],
     },
     yAxis: {
         labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
     },
     dataSource: heatmapData,
});
heatmap.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 HeatMap</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" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>