HelpBot Assistant

How can I help you?

Getting started with EJ2 JavaScript HeatMap Chart Component

10 Feb 202624 minutes to read

The HeatMap component visualizes two-dimensional data with color-coded cells, making it ideal for displaying large datasets, correlation patterns, and performance metrics. Syncfusion’s Essential^® JS 2 for JavaScript (global script) framework provides a pure JavaScript implementation that runs in modern web browsers without dependencies.

HeatMap Component Initialization

Initialize the HeatMap component using either of the following approaches:

Local setup: Reference scripts and styles hosted locally on your machine
CDN approach: Reference scripts and styles from a Content Delivery Network (faster for most use cases)

Using local script and style references in a HTML page

Step 1: Create an app folder quickstart for Essential^® JS 2 JavaScript controls.

Step 2: You can get the global scripts and styles from the Essential Studio^® JavaScript (Essential^® JS 2) build installed location.

Syntax:

Script: **(installed location)**/Syncfusion/Essential Studio/{RELEASE_VERSION}/Essential JS 2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js

Example:

Script: C:/Program Files (x86)/Syncfusion/Essential Studio/16.2.45/Essential JS 2/ej2-heatmap/dist/global/ej2-heatmap.min.js

Step 3: Create a folder quickstart/resources and copy/paste the dependent scripts and styles from the above installed location to quickstart/resources location.

Step 4: Create a HTML page (index.html) in quickstart location and add the Essential^® JS 2 script and style references.

<!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
            <title>Essential JS 2</title>
            <script src="resources/ej2-base.min.js" type="text/javascript"></script>
            <script src="resources/ej2-data.min.js" type="text/javascript"></script>
            <script src="resources/ej2-svg-base.min.js" type="text/javascript"></script>
            <script src="resources/ej2-heatmap.min.js" type="text/javascript"></script>
       </head>
       <body>
       </body>
  </html>

Step 5: Now, add the div element and initiate the Essential^® JS 2 HeatMap component in the index.html by using following code

<!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
            <title>Essential JS 2</title>
            <script src="resources/ej2-base.min.js" type="text/javascript"></script>
            <script src="resources/ej2-data.min.js" type="text/javascript"></script>
            <script src="resources/ej2-svg-base.min.js" type="text/javascript"></script>
            <script src="resources/ej2-heatmap.min.js" type="text/javascript"></script>
       </head>
       <body>
            <!-- Add the HTML <div> element  -->
             <div id="container"></div>
            <script>
                // initialize heatmap control
                var heatmap = new ej.heatmap.HeatMap();

                // Render initialized heatmap.
                heatmap.appendTo('#container')
            </script>
       </body>
  </html>

Step 6: Now, run the index.html in web browser, it will render the Essential^® JS 2 HeatMap component.

Using CDN links for script and style reference

Step 1: Create an app folder quickstart for the Essential^® JS 2 JavaScript controls.

Step 2: The Essential^® JS 2 controls’ global scripts are already hosted in the below CDN link formats.

Common Control Script:

Syntax: https://cdn.syncfusion.com/ej2/{RELEASE_VERSION}/dist/ej2.min.js

Example:

Script: https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js

Individual Control Scripts:

Syntax

http://cdn.syncfusion.com/ej2/{RELEASE_VERSION}/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js

Example:

HeatMap Script: https://cdn.syncfusion.com/ej2/32.1.19/ej2-heatmap/dist/global/ej2-heatmap.min.js

Dependency Scripts

https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/dist/global/ej2-base.min.js

https://cdn.syncfusion.com/ej2/32.1.19/ej2-data/dist/global/ej2-data.min.js

https://cdn.syncfusion.com/ej2/32.1.19/ej2-svg-base/dist/global/ej2-svg-base.min.js

Create a HTML page (index.html) in ~/quickstart location and add the CDN link references. Now, add the div element and initiate the Essential^® JS 2 HeatMap component in the index.html by using following code.

<!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
            <title>Essential JS 2</title>
            <script src="https://cdn.syncfusion.com/ej2/{RELEASE_VERSION}/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
            <script src="https://cdn.syncfusion.com/ej2/{RELEASE_VERSION}/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
            <script src="https://cdn.syncfusion.com/ej2/{RELEASE_VERSION}/ej2-svg-base/dist/global/ej2-svg-base.min.js" type="text/javascript"></script>
            <script src="https://cdn.syncfusion.com/ej2/{RELEASE_VERSION}/ej2-heatmap/dist/global/ej2-heatmap.min.js" type="text/javascript"></script>
       </head>
       <body>
            <!-- Add the HTML <div> element  -->
             <div id="container"></div>
            <script>
                // initialize heatmap control
                var heatmap = new ej.heatmap.HeatMap();

                // Render initialized heatmap.
                heatmap.appendTo('#container')
            </script>
       </body>
  </html>

Please replace {RELEASE_VERSION} with the latest version number in the script file referred to in the sample.

Step 3: Now, run the index.html in web browser, it will render the Essential^® JS 2 HeatMap component.

The following example demonstrates a basic HeatMap component initialized with default settings.

index.html
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>
            <title>Essential JS 2</title>
       <script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
       <body>
            <!-- Add the HTML <div> element  -->
            <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>

Populate HeatMap with data

The HeatMap requires a two-dimensional array where each element represents a data point with its corresponding value. Rows typically represent categories on the Y-axis, and columns represent categories on the X-axis. Values are color-encoded based on the palette settings.

index.js
index.html
var heatmapData = [
     [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]];

var heatmap = new ej.heatmap.HeatMap({
     dataSource: heatmapData
}, '#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://cdn.syncfusion.com/ej2/32.2.3/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 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>

Enable axis labels

You can add axis labels to the HeatMap and format those labels using the xAxis and yAxis properties. Axis labels provide additional information about the data points populated in the HeatMap.

index.js
index.html
var heatmapData = [
     [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]];

var heatmap = new ej.heatmap.HeatMap({
        xAxis: {
            labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 
                        'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin',   'Mario'],
        },
        yAxis: {
            labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
        },
     dataSource: heatmapData,   
}, '#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://cdn.syncfusion.com/ej2/32.2.3/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 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>

Add HeatMap title

Add a title using the titleSettings property to the HeatMap to provide quick information to the user about the data populated in the HeatMap.

index.js
index.html
var heatmapData = [
     [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]];

var heatmap = new ej.heatmap.HeatMap({
     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,   
}, '#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://cdn.syncfusion.com/ej2/32.2.3/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 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>

Enable legend

Use a legend for the HeatMap in the legendSettings object by setting the visible property to true and injecting the Legend module using the HeatMap.Inject(Legend) method.

index.js
index.html
var heatmapData = [
     [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]];

var heatmap = new ej.heatmap.HeatMap({
     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, 
      legendSettings: {
            position: 'Right',
            showLabel: true,
            height: "150"
        }  
}, '#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://cdn.syncfusion.com/ej2/32.2.3/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 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>

Add data label

Add data labels to improve the readability of the HeatMap. This can be achieved by setting the showLabel property to true in the cellSettings object.

index.js
index.html
var heatmapData = [
     [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]];

var heatmap = new ej.heatmap.HeatMap({
     titleSettings: {
            text: 'Sales Revenue per Employee (in 1000 US$)',
            textStyle: {
                size: '15px',
                fontWeight: '500',
                fontStyle: 'Normal',
                fontFamily: 'Segoe UI'
            }
        },
         cellSettings: {
            showLabel: true,
        },
        xAxis: {
            labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 
                        'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin',   'Mario'],
        },
        yAxis: {
            labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
        },
     dataSource: heatmapData, 
      legendSettings: {
            position: 'Right',
            showLabel: true,
            height: "150"
        }  
}, '#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://cdn.syncfusion.com/ej2/32.2.3/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 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>

Add custom cell palette

The default palette settings of the HeatMap cells can be customized by using the paletteSettings property.
Using the palette property in paletteSettings object, you can change the color set for the cells.
You can change the color mode of the cells to fixed or gradient mode using the type property.

index.js
index.html
var heatmapData = [
     [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]];

var heatmap = new ej.heatmap.HeatMap({
     titleSettings: {
            text: 'Sales Revenue per Employee (in 1000 US$)',
            textStyle: {
                size: '15px',
                fontWeight: '500',
                fontStyle: 'Normal',
                fontFamily: 'Segoe UI'
            }
        },
         cellSettings: {
            showLabel: true,
        },
        xAxis: {
            labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 
                        'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin',   'Mario'],
        },
        yAxis: {
            labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
        },
     dataSource: heatmapData, 
      legendSettings: {
            position: 'Right',
            showLabel: true,
            height: "150"
        },
           paletteSettings: {
            palette: [{ value: 0, color: '#C06C84' },
                { value: 50, color: '#6C5B7B' },
                { value: 100, color: '#355C7D' }                
            ],
            type: "Gradient"
        },  
}, '#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://cdn.syncfusion.com/ej2/32.2.3/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 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>

The tooltip is used when you cannot display information by using the data labels due to space constraints. You can enable the tooltip by setting the showTooltip property to true and injecting the Tooltip module using the HeatMap.Inject(Tooltip) method.

index.js
index.html
var heatmapData = [
     [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]];

var heatmap = new ej.heatmap.HeatMap({
     titleSettings: {
            text: 'Sales Revenue per Employee (in 1000 US$)',
            textStyle: {
                size: '15px',
                fontWeight: '500',
                fontStyle: 'Normal',
                fontFamily: 'Segoe UI'
            }
        },
         cellSettings: {
            showLabel: true,
        },
        xAxis: {
            labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 
                        'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin',   'Mario'],
        },
        yAxis: {
            labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
        },
     dataSource: heatmapData, 
      legendSettings: {
            position: 'Right',
            showLabel: true,
            height: "150"
        },
        showTooltip:true,  
        
}, '#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://cdn.syncfusion.com/ej2/32.2.3/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 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>

Search docs

Ask HelpBot

Search docs

Ask HelpBot

How can I help you?

Getting started with EJ2 JavaScript HeatMap Chart Component

HeatMap Component Initialization

Using local script and style references in a HTML page

Using CDN links for script and style reference

Populate HeatMap with data

Enable axis labels

Add HeatMap title

Enable legend

Add data label

Add custom cell palette

Enable tooltip