Getting Started with Syncfusion® JavaScript (ES5) HeatMap Component

22 Jul 20263 minutes to read

Build your first Syncfusion JavaScript (ES5) application with a HeatMap in a few minutes. This quickstart guides you through creating a minimal HTML page, loading the required Syncfusion scripts from the CDN, supplying two-dimensional data, and rendering a color-coded data grid.

Prerequisites

Register your Syncfusion license key before using the component. For more information, refer to the license key registration documentation.

Dependencies

The HeatMap component is available in the @syncfusion/ej2-heatmap package. The following dependencies are required:

|-- @syncfusion/ej2-heatmap
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-svg-base

The HeatMap is a pure JavaScript component and does not require a third-party framework.

Quick Setup

Step 1: Create the Folder and Files

Create a folder named quickstart in your preferred directory.

Inside the quickstart folder, create the following files:

  • index.html
  • index.js

Step 2: Add Syncfusion® CDN Resources

You can load the HeatMap component by using individual package scripts or the combined Syncfusion bundle. Choose only one of these approaches.

Individual Package Scripts

Add the following script references to the <head> section of index.html. Load the dependencies before the HeatMap component script.

<script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-svg-base/dist/global/ej2-svg-base.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-heatmap/dist/global/ej2-heatmap.min.js" type="text/javascript"></script>

Combined Bundle

Alternatively, load all Syncfusion JavaScript components from a single combined bundle:

<script src="https://cdn.syncfusion.com/ej2/33.2.3/dist/ej2.min.js" type="text/javascript"></script>

Do not include the combined bundle together with the individual package scripts.

Step 3: Add the Syncfusion® HeatMap Control

The index.html file contains the HeatMap container and references a separate index.js file that contains the component initialization.

The global scripts added in Step 2 register the ej.heatmap.HeatMap class in the ej namespace. Therefore, no module imports are required.

var heatmap = new ej.heatmap.HeatMap({
}, '#element');
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>
            <title>Essential JS 2</title>
       <script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.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>

The new ej.heatmap.HeatMap({...}) call creates the HeatMap component. The configuration object uses the following key property:

  • dataSource — Specifies the data displayed in the HeatMap.

Finally, heatmap.appendTo('#element') renders the component inside the <div id="container"> element declared in index.html.

Step 4: Open the Application in a Browser

Open quickstart/index.html through a local web server.

If you are using the Visual Studio Code Live Server extension:

  1. Right-click index.html in the Explorer.
  2. Select Open with Live Server.
  3. Open the URL displayed by Live Server, such as http://127.0.0.1:5500/.

The browser displays the initialized HeatMap.

Output

After completing the quick setup, the browser displays a HeatMap.

Syncfusion HeatMap Quick Start Output

Troubleshooting

  • The page is blank. Open index.html through a local web server instead of opening the file directly from the file system.
  • ej is not defined. Ensure that the Syncfusion CDN scripts are loaded before index.js.
  • ej.heatmap is undefined. Verify that ej2-heatmap.min.js is loaded after ej2-base.min.js, ej2-data.min.js, and ej2-svg-base.min.js.
  • The HeatMap is empty. Confirm that dataSource contains a valid two-dimensional numeric array and that the container ID matches appendTo('#container').