Heat Map chart in Angular using ApexChart

In this article, we’ll learn how to create a Heatmap Chart in Angular. But first of all, we need to know what is the heatmap chart.
According to Wikipedia “A heat map (or heatmap) is a data visualization technique that shows magnitude of a phenomenon as color in two dimensions”. In simple way a heat map is a two-dimensional representation of data in which values are represented by colors. Heat maps allow the viewer to understand complex data sets.
Let’s take example for the temperature of months date wise visualization we create using ApexChart.
To draw the chart lets start install ApexChart.


npm i apexcharts
npm i core-js
npm i ng-apexcharts

After installing module lets add a module in our app.module.ts file.

....
import { NgApexchartsModule } from "ng-apexcharts";
...
@NgModule({
imports:      [ ..., NgApexchartsModule ],
....
})

After adding a module in the app.module file we can use it in our component to draw the chart. Let’s create app.component.ts file and add import ApexChart module in module.

Let’s assign options and the data to draw the heatmap chart. Display in below full code.


import { Component, VERSION ,ViewChild,OnInit } from '@angular/core';

import {ChartComponent,
  ApexAxisChartSeries,
  ApexTitleSubtitle,
  ApexDataLabels,
  ApexChart,
  ApexPlotOptions
} from "ng-apexcharts";

export type ChartOptions = {
  series: ApexAxisChartSeries;
  chart: ApexChart;
  dataLabels: ApexDataLabels;
  title: ApexTitleSubtitle;
  plotOptions: ApexPlotOptions;
};


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  implements OnInit{

 @ViewChild("chart") chart: ChartComponent;
  public chartOptions: Partial;


  constructor() {

    
}

  ngOnInit(){
    this.chartOptions = {
      series: [
        {
          name: "Jan",
          data: this.generateData(20, {
            min: -30,
            max: 55
          })
        },
        {
          name: "Feb",
          data: this.generateData(20, {
            min: -30,
            max: 55
          })
        },
        {
          name: "Mar",
          data: this.generateData(20, {
            min: -30,
            max: 55
          })
        },
        {
          name: "Apr",
          data: this.generateData(20, {
            min: -30,
            max: 55
          })
        },
        {
          name: "May",
          data: this.generateData(20, {
            min: -30,
            max: 55
          })
        },
        {
          name: "Jun",
          data: this.generateData(20, {
            min: -30,
            max: 55
          })
        },
        {
          name: "Jul",
          data: this.generateData(20, {
            min: -30,
            max: 55
          })
        },
        {
          name: "Aug",
          data: this.generateData(20, {
            min: -30,
            max: 55
          })
        },
        {
          name: "Sep",
          data: this.generateData(20, {
            min: -30,
            max: 55
          })
        }
      ],
      chart: {
        height: 350,
        type: "heatmap"
      },
      plotOptions: {
        heatmap: {
          shadeIntensity: 0.5,
          colorScale: {
            ranges: [
              {
                from: -30,
                to: 5,
                name: "low",
                color: "#00A100"
              },
              {
                from: 6,
                to: 20,
                name: "medium",
                color: "#128FD9"
              },
              {
                from: 21,
                to: 45,
                name: "high",
                color: "#FFB200"
              },
              {
                from: 46,
                to: 55,
                name: "extreme",
                color: "#FF0000"
              }
            ]
          }
        }
      },
      dataLabels: {
        enabled: false
      },
      title: {
        text: "HeatMap Chart"
      }
    };
  }

  public generateData(count, yrange) {
    var i = 0;
    var series = [];
    while (i < count) {
      var x = "W" + (i + 1).toString();
      var y =
        Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;

      series.push({
        x: x,
        y: y
      });
      i++;
    }
    return series;
  }
}


<h1 style="text-align:center">Temprature </h1>
<div id="chart">
  <apx-chart
    [series]="chartOptions.series"
    [chart]="chartOptions.chart"
    [dataLabels]="chartOptions.dataLabels"
    [plotOptions]="chartOptions.plotOptions"
    [title]="chartOptions.title"
  ></apx-chart>
</div>

Below is the full embeded code for the HeatMap using ApexChart you can easily used in your application.
Example

Spread the love

Education For Betterment

Heat Map chart in Angular using ApexChart

About The Author

Jugal Rana

No Responses

Related Posts

About The Author

No Responses