Getting Started with React HeatMap chart component

This section explains the steps required to create a HeatMap and demonstrates the basic usage of the HeatMap component.

You can explore some useful features in the HeatMap component using the following video.

Prerequisites

Before getting started, ensure that your development environment meets the system requirements for Syncfusion® React UI components. That page documents the supported React, Node.js, and npm versions, and includes the React-version compatibility table for Syncfusion React components.

  • Basic knowledge of React and TypeScript (recommended)
  • A code editor like Visual Studio Code

Dependencies

The following list shows the package dependencies for the HeatMap component.

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

Installation and configuration

To easily set up a React application, use create-vite, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like create-react-app. For detailed steps, refer to the Vite installation instructions. Vite sets up your environment using JavaScript and optimizes your application for production.

Note: To create a React application using create-react-app, refer to this documentation for more details.

To create a new Vite React application, run the following command:

npm create vite@latest my-app

To set up a React application in TypeScript environment, run the following commands:

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

To set up a React application in JavaScript environment, run the following commands:

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

Adding Syncfusion® packages

All the available Essential® JS 2 packages are published in the npmjs.com public registry. To install the HeatMap package, run the following command in your project directory:

npm install @syncfusion/ej2-react-heatmap

Installing @syncfusion/ej2-react-heatmap automatically pulls in all required transitive dependencies.

Adding HeatMap to the project

Add the HeatMap component to the application. For a basic example, add the component in src/App.tsx (or src/App.jsx) using the following code, then mount it into the #container element with createRoot:

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { HeatMapComponent } from '@syncfusion/ej2-react-heatmap';

export function App() {
  return (<HeatMapComponent id='heatmap'></HeatMapComponent>);
}

export default App;

const root = createRoot(document.getElementById('container')!);
root.render(<App />);

Now run the npm run dev command in the console to start the development server. This command compiles your code and serves the application locally, opening it in the browser.

npm run dev

The following example shows a complete basic HeatMap. It includes the data source used in the later sections of this guide:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { HeatMapComponent } from '@syncfusion/ej2-react-heatmap';

export function App() {
  return ( <HeatMapComponent ></HeatMapComponent> );
}

const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { HeatMapComponent } from '@syncfusion/ej2-react-heatmap';

export function App() {
  return ( <HeatMapComponent ></HeatMapComponent> );
}

const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

Module injection

HeatMap features are segregated into individual feature-wise modules. To use a feature, inject its service into the HeatMap component using the <Inject> child element with the services prop. The following modules are used in the examples in this guide:

  • Legend - Provides the legend feature by injecting it.
  • Tooltip - Provides the tooltip feature by injecting it.

Note: Injecting a module is required only for the features you use. For example, if you do not inject the Tooltip module, the showTooltip property will have no effect.

Import the modules from the HeatMap package and inject them as shown below. Note that createRoot is imported from react-dom/client (React 18+):

import * as React from "react";
import { createRoot } from "react-dom/client";
import { HeatMapComponent, Inject, Legend, Tooltip } from '@syncfusion/ej2-react-heatmap';

export function App() {
  return (
    <HeatMapComponent id='heatmap'>
      <Inject services={[Legend, Tooltip]} />
    </HeatMapComponent>
  );
}

export default App;

const root = createRoot(document.getElementById('container')!);
root.render(<App />);

Note: In React 18 and later, createRoot is provided by react-dom/client. If you are using React 17 or earlier, use ReactDOM.render(<App />, document.getElementById('container')) instead.

For a complete list of injectable HeatMap modules, see the HeatMap API reference.

Populate heat map with data

This section shows how to populate the heat map with a two-dimensional array of values using the dataSource property:

import { HeatMapComponent, Inject, Legend, Tooltip } from '@syncfusion/ej2-react-heatmap';
import * as ReactDOM from "react-dom";
import * as React from "react";

export function App() {
    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]];
    return ( <HeatMapComponent  dataSource={heatmapData}>
            <Inject services={[Legend, Tooltip]} />
            </HeatMapComponent> );
}

const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
import { HeatMapComponent, Inject, Legend, Tooltip } from '@syncfusion/ej2-react-heatmap';
import * as ReactDOM from "react-dom";
import * as React from "react";

export function App() {
    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]];
    return ( <HeatMapComponent  dataSource={heatmapData}>
            <Inject services={[Legend, Tooltip]} />
            </HeatMapComponent> );
}

const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

Troubleshooting

  • createRoot is not a function — Likely cause: createRoot imported from react-dom instead of react-dom/client. Fix: Import createRoot from react-dom/client (React 18+).
  • Tooltip/Legend does not show — Likely cause: The corresponding module was not injected. Fix: Add the module to <Inject services={...} />.

See also