Getting Started with TypeScript HeatMap Component

This document explains how to create a HeatMap and configure its features in TypeScript using the Essential JS 2 webpack quickstart seed repository.

The quickstart project uses its included webpack.config.js file to compile and bundle the TypeScript application. For more information, refer to the webpack getting-started guide.

Prerequisites

Before you begin, ensure that the following software is installed:

  • Node.js with npm
  • Visual Studio Code or another text editor
  • Git for cloning the quickstart repository
  • A modern web browser such as Chrome, Edge, Firefox, or Safari

Basic familiarity with TypeScript, npm, and webpack is recommended.

Register your Syncfusion license key before initializing 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 packages are its minimum dependencies:

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

Compatible package versions are resolved from the project-root package.json file. Keep all Syncfusion package versions consistent to avoid dependency conflicts.

Quick Setup

Step 1: Create a Project Folder

Create a folder named my-heatmap in your preferred location. This folder will contain the HeatMap TypeScript project.

Step 2: Open a Terminal

Open a terminal and navigate to the my-heatmap folder.

  • On Windows, use Command Prompt or PowerShell.
  • On macOS or Linux, use Terminal.

Step 3: Clone the Quickstart Repository

Run the following command to clone the Syncfusion JavaScript quickstart project:

git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart

Step 4: Navigate to the Project Folder

Navigate to the cloned project directory:

cd ej2-quickstart

Step 5: Install the Required Packages

Run the following command from the project root to install the dependencies listed in package.json:

npm install

Step 6: Update the HTML Template

Open the ej2-quickstart folder in Visual Studio Code or another text editor.

Locate src/index.html. Preserve the existing content generated by the seed project and add a <div> element with the ID element inside the <body> element.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 HeatMap</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Syncfusion HeatMap TypeScript example">
    <meta name="author" content="Syncfusion">
    <!-- Preserve the existing head content from the seed template. -->
</head>

<body>
    <h1>Syncfusion HeatMap</h1>
    <!-- Container for the HeatMap. -->
    <div id="element"></div>
</body>

</html>

The webpack configuration supplied by the quickstart project compiles the TypeScript entry file and loads the generated bundle in this page.

Step 7: Create the HeatMap Component

Locate src/app/app.ts and add the following code:

import { HeatMap } from '@syncfusion/ej2-heatmap';

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({
     dataSource: heatmapData,
     });
heatmap.appendTo('#element');

The HeatMap constructor creates the component. The dataSource property supplies the values displayed in its cells.

The appendTo('#element') call renders the component in the HTML element whose ID matches the supplied selector.

Step 8: Run the Application

Run the following command from the project root:

npm run start

Wait for webpack to finish compiling the application. If the browser does not open automatically, open the local URL displayed in the terminal.

The project commonly runs at:

http://localhost:4000/

The exact port can vary based on the webpack development-server configuration. To stop the development server, press Ctrl+C in the terminal.

Output

After completing the quick setup, the browser displays HeatMap.

Module Injection

Basic HeatMap rendering does not require feature-module injection. Inject optional modules only when the corresponding features are used:

  • Legend enables the HeatMap legend.
  • Tooltip enables cell tooltips.

Import HeatMap with the required modules and call HeatMap.Inject() before creating the component:

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

HeatMap.Inject(Legend, Tooltip);

Troubleshooting

  • The repository cannot be cloned. Verify that Git is installed, confirm the internet connection, and run git --version.
  • npm install fails. Verify that Node.js and npm are installed by running node --version and npm --version.
  • Cannot find module '@syncfusion/ej2-heatmap'. Run npm install @syncfusion/ej2-heatmap --save from the project root.
  • The TypeScript application does not compile. Ensure that all Syncfusion packages use compatible versions and run npm run build to view the complete error.
  • The page is blank. Check the browser console for errors and confirm that webpack completed the build successfully.
  • The HeatMap is empty. Confirm that dataSource contains a valid two-dimensional numeric array and that the container ID matches appendTo('#element').