We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to get started easily with Syncfusion Angular 11 Heat Map

Platform: JavaScript - EJ 2 |
Control: HeatMap

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:

 

Installation and application creation

 

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

 

npm install @angular/cli@11.2.3

 

Note:

If you need to follow and run the application in Angular 9 or earlier versions, replace the CLI command version with your preferred version and install it.

 

npm install -g @angular/cli@<CLI VERSION>

 

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

 

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

 

npm install @syncfusion/ej2-angular-heatmap

 

  1. 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.

 

Angular-app

 

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 { }

 

  1. Add the Heatmap component in the template file.

 

[src/app/app.component.html]

 

<ejs-heatmap></ejs-heatmap>

 

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

 

 

heatmap

 

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>

 

Populated-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>

 

Heatmap_AxisLabel

 

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!

 

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile