How to create ngx-charts heat map in Angular

Angular is a TypeScript-based free, open-source framework developed by Google that allows its users to develop front-ends of mobile and web applications. It is focused on creating dynamic single-page applications (SPA) and provides a structured way to build client-side applications using TypeScript/JavaScript, HTML, and CSS. It also supports multiple libraries and encourages component-based architecture.

Ngx-charts is a unique charting library that is integrated with Angular. It uses Angular to render and animate the SVG elements and uses d3 for mathematical queries like scaling and transforming. Moreover, the charts created through ngx-charts are aesthetically pleasing, quick, and up to par with the requirements. Finally, this library also supports custom charts, i.e., it allows things like legends, axes, dimension helpers, gradients, shapes, multi-chart combo charts, and much more.

Setting up Angular

Before starting the Angular setup, we must have Node.js and NPM (or Yarn) package manager. To install these, visit the official website for NPM and download the version compatible with our machine.

Now that we have set up Node.js and our package manager, we can proceed with Angular. Follow the steps below to download, install, and set up our Angular application.

  1. First, We will open our terminal and enter the command below to install our Angular CLI. 

npm install -g @angular/cli
Install Angular CLI

  1. Now, we can create our Angular application by entering the command below, where we can replace heatmapApp with any name we like. After we enter this, we need to enable routing and select CSS as our style.

ng new heatmapApp
Create Angular application

  1. To make our process more accessible, we can use an IDE like VS Code and install extensions like Angular Language Service.

  2. Now run the following commands inside the newly created folder. The first command will build the code and generate multiple bundles for differential loading. The second command bundles our code with Webpack so that every change we make will be reflected on the browser. This will open our local page for our Angular application at the default port of "http://localhost:4200".

ng build heatmapApp
ng serve heatmapApp
Bundle code

  1. We will open another terminal and install ngx-charts by entering the following command. 

npm install @swimlane/ngx-charts --save
Install ngx-charts

Everything is set up now. The next step will be to add data to our chart elements and components.

Creating a heat map chart

Let us open the IDE code to add our data elements.

  1. Open the "app.module.ts" file and add the following code to setup its import modules and imports. 

// rest of imports
import { NgxChartsModule }from '@swimlane/ngx-charts';  // added
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';  // added
@NgModule({
// rest of modules
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,  // added
    NgxChartsModule  // added
  ]
})
export class AppModule { }
Importing modules

  1. Now we will open the "app.components.ts" file and add our data. 

// rest of code
export class AppComponent {
  title = 'heatmapApp';
  view: [number, number] = [1000, 1000];
  dataset = [ {
      "name": "x", "series": [
        { "name": "a", "value": 1 },
        { "name": "b", "value": 2 },]
    },
    {
      "name": "y", "series": [
        { "name": "a", "value": 3 },
        { "name": "b", "value": 2 },]
    } ]
  xAxis: boolean = true;
  yAxis: boolean = true;
  colorScheme: string = 'flame';
}
Adding data

  1. Ngx-charts provide various components to generate different graphs. For this example, we will use HTML for a heat map chart. 

<ngx-charts-heat-map
  [view]="view"
  [scheme]="colorScheme"
  [xAxis]="xAxis"
  [yAxis]="yAxis"
  [results]="dataset"
  >
</ngx-charts-heat-map>
Generate heat map chart

  1. If you encounter any d3 errors, run the following command. 

npm install --save-dev @types/d3-shape @types/d3-scale @types/d3-selection
Installing d3 dependecies

We have finished creating our heat map chart. Now, we can visit the local host page and see our plot. We have given a running version of the chart application below for convenience.

{
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
  "recommendations": ["angular.ng-template"]
}
Example heat map chart

Note: Data was taken from the Pakistan Bureau of Statistics.

Conclusion

Ngx-charts is a powerful tool that provides users with many charts and visualizations. This diverse range of charts, coupled with interactivity and responsiveness, makes a smooth and cleaner experience for its users. Moreover, its customizability and ease of use make it a relatively straightforward tool in data visualization. The vast array of chart types and the tool's usability allow for a better overall experience.

Note: To learn more about the heat map chart, visit the official documentation.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved