Getting started with Angular HeatMap chart component

30 Jul 20268 minutes to read

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 with the following video.

Prerequisites

Ensure your development environment meets the System Requirements for Syncfusion® Angular UI Components, which covers supported Node.js, Angular, and @syncfusion/ej2-angular-heatmap versions.

You also need a modern code editor such as Visual Studio Code, Cursor, or Syncfusion® CodeStudio.

Setup the Angular application

A straightforward approach to begin with Angular is to create a new application using the Angular CLI. Install Angular CLI globally with the following command:

npm install -g @angular/cli

Verify the installation:

ng version

Angular 21 Standalone Architecture: Standalone components are the default in Angular 21. This guide uses the modern standalone architecture. If you need more information about the standalone architecture, refer to the Standalone Guide.

Installing a specific version

To install a particular version of Angular CLI, use:

npm install -g @angular/[email protected]

Create an Angular application

With Angular CLI installed, execute this command to generate a new application. When prompted, accept the default options unless you have a specific reason to change them.

ng new syncfusion-angular-app
  • This command prompts you to configure settings like enabling Angular routing and choosing a stylesheet format. Accept the defaults (no routing, CSS) to follow this guide.
? Which stylesheet format would you like to use? (Use arrow keys)
> CSS             [ https://developer.mozilla.org/docs/Web/CSS                     ]
  Sass (SCSS)     [ https://sass-lang.com/documentation/syntax#scss                ]
  Sass (Indented) [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less            [ http://lesscss.org                                             ]
  • By default, a CSS-based application is created. Use SCSS if required:
ng new syncfusion-angular-app --style=scss
  • During project setup, when prompted for the Server-side rendering (SSR) option, choose the appropriate configuration.

Server-side rendering prompt

  • Select the required AI tool, or ‘none’ if you do not need any AI tool.

AI tool selection prompt

  • Navigate to your newly created application directory:
cd syncfusion-angular-app

In Angular 19 and below, the CLI generates files named app.component.ts, app.component.html, app.component.css, and so on. In Angular 20+, the structure is simpler: src/app/app.ts, app.html, and app.css (no .component. suffixes).

Adding the Syncfusion® Angular HeatMap package

To install the Syncfusion® Angular HeatMap package, use the following command:

ng add @syncfusion/ej2-angular-heatmap

The ng add command installs the package, registers it in package.json, and configures the required entries in your workspace automatically.

If ng add is unavailable in your setup, install the package manually with:

npm install @syncfusion/ej2-angular-heatmap

Add Syncfusion® Angular HeatMap component

Open src/app/app.component.ts (Angular 19 and below) or src/app/app.ts (Angular 20+) and replace its contents with the following to render the Sparkline component.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { HeatMapModule} from '@syncfusion/ej2-angular-heatmap'



import { Component, ViewEncapsulation } from '@angular/core';

@Component({
imports: [
         HeatMapModule
    ],
standalone: true,
    selector: 'my-app',
    // specifies the template string for the HeatMap component
    template: `<ejs-heatmap id="heatmap-container"></ejs-heatmap>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Run the application

Run the development server with ng serve. Alternatively, npm start works if a start script is configured in package.json.

ng serve

Module Injection

The HeatMap component’s features are segregated into individual feature-wise modules. To use a feature, register its corresponding service in the component’s providers array. The relevant services and their descriptions are listed below:

  • LegendService - Provides the legend feature.
  • TooltipService - Provides the tooltip feature.

Import the required services from the HeatMap package and register them in the component’s providers array as shown below:

import { Component } from '@angular/core';
import { HeatMapModule, LegendService, TooltipService } from '@syncfusion/ej2-angular-heatmap';

@Component({
    imports: [
        HeatMapModule
    ],
    standalone: true,
    providers: [ LegendService, TooltipService],
    selector: 'app-root',
    template: `<ejs-heatmap id="heatmap-container"></ejs-heatmap>`
})
export class AppComponent {}

Populate heat map with data

This section explains how to populate a two-dimensional array as the HeatMap’s dataSource.

import { HeatMapModule, LegendService, TooltipService } from '@syncfusion/ej2-angular-heatmap'
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
imports: [
         HeatMapModule
    ],
    standalone: true,
    providers: [LegendService, TooltipService],
    selector: 'my-app',
    template:
       `<ejs-heatmap id='container' style="display:block;" [dataSource]='dataSource' [legendSettings]='legendSettings' [tooltipSettings]='tooltipSettings'>
        </ejs-heatmap>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent{
    public legendSettings: Object = {
        visible: true,
        position: 'Right',
    };
    public tooltipSettings: Object = {
        enable: true
    };
    // Data for heatmap
    public dataSource: Object[] = [
        [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]
    ];
    }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Troubleshooting

Legend/tooltip not appearing — Feature service not registered. Add LegendService / TooltipService to the component’s providers array.

“Cannot find module” for HeatMap imports — Package not installed. Re-run npm install @syncfusion/ej2-angular-heatmap --save.

See also

For deeper coverage of individual features, see the following topics: