How to get started easily with Syncfusion Angular 11 Heat Map?

The Essential JS2 Angular Heatmap component is used to visualize two-dimensional data, in which the values are represented in gradient or fixed colors. This KB article explains how to easily get started with EJ2 Heatmap component in Angular 11 project with minimal code.

Prerequisites

Before starting, the following tools and SDK needs to be installed in your machine:

• Node.js (latest version)
• Angular 11
• Angular CLI
• Typescript 4+
• Visual Studio Code for Editor

Installation and application creation

1. You can install Angular CLI 11 using the following command.

npm install @angular/cli@11.2.3

Create an Angular Application

1. Create a new Angular project by using the command `ng new` and navigate to that folder

ng new angular11-app

cd angular11-app

2. Install the ej2-angular-heatmap package using the npm install command.

npm install @syncfusion/ej2-angular-heatmap

3. Serve the Angular 11 application using the following command.

   ng serve --open
   
   

Your application will open in browser in the http://localhost:4200. Refer to the following screenshot for Angular 11 version.

Add Angular 11 HeatMap

You can add the Angular 11 Heatmap component using the `ejs-heatmap` tag. The attributes used within this tag allows you to define other functionalities of heatmap.

1. Import HeatMapAllModule into app.module.ts file from the @syncfusion/ej2-angular-heatmap package.

[src/app/app.module.ts]

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

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

 

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    HeatMapAllModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

 

export class AppModule { }

2. Add the Heatmap component in the template file.

[src/app/app.component.html]

<ejs-heatmap></ejs-heatmap>

3. Run the application using the following command, and you can see the following represented output of the EJ2 Angular Heatmap component.

Populate Heatmap with data

Now, by providing data, you can visualize and populate the following two-dimensional array data to the Heatmap.

[src/app/app.component.ts]

export class AppComponent {

  dataSource = [

    [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]

  ];

}

[src/app/app.component.html]

<ejs-heatmap [dataSource]="dataSource"></ejs-heatmap>

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.

[src/app/app.component.ts]

export class AppComponent {

  dataSource = [

    [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]

  ];

  xAxis = {

    labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 'Michael', 'Robert',

      'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],

  };

  yAxis = {

    labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],

  }

}

[src/app/app.component.html]

<ejs-heatmap [dataSource]='dataSource' [xAxis]='xAxis' [yAxis]='yAxis'></ejs-heatmap>

Summary

You can learn more about the Angular 11 Heatmap from the following links:

GitHub repository of code used in this article can be found here.

Checkout Angular 11 Heatmap features.

Checkout Angular 11 Heatmap documentation.

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!