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>

Conclusion

I hope you enjoyed learning about how to get started easily with Syncfusion Angular 11 Heat Map.

You can refer to our Angular HeatMap featuretour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our demo to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!