Angular HeatMap Chart - Visualize Matrix Data

Overview

The Angular HeatMap Chart is a graphical representation of two-dimensional data where values are represented with gradient or solid color variations. The data points are rendered as HeatMap cells using Scalable Vector Graphics (SVG) or canvas UI rendering.

Angular HeatMap Chart Code Example

Easily get started with the Angular HeatMap Chart using a few simple lines of HTML and TS code, as demonstrated below. Also explore our Angular HeatMap Chart example that shows you how to render and configure the HeatMap Chart in Angular.

<ejs-heatmap
    id="container"
    [titleSettings]="titleSettings"
    [xAxis]="xAxis"
    [yAxis]="yAxis"
    style="display:block;"
    [dataSource]="dataSource"
  >
  </ejs-heatmap>

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  // Specifies the template string for the heatmap chart component.
  templateUrl: './app.component.html',
})
export class AppComponent {
   titleSettings: Object = {
    text: 'Sales Revenue per Employee (in 1000 US$)',
  };
  dataSource: Object[] = [
    [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: Object = {
    labels: [
      'Nancy',
      'Andrew',
      'Janet',
      'Margaret',
      'Steven',
      'Michael',
      'Robert',
      'Laura',
      'Anne',
      'Paul',
      'Karin',
      'Mario',
    ],
  };
  yAxis: Object = {
    labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
  };
}

Dealing with large data

Though the Angular HeatMap Chart can render data points using both SVG and canvas modes, it uses canvas rendering mode while displaying large volumes of data for the best initial load performance and optimized memory usage.

• Rendering mode documentation

Data binding

The HeatMap Chart can be bound to data using JSON or an array of objects. JSON data can be local or remote, and it can be retrieved using different adaptors. The JSON data can be nested as well.

• Data binding documentation

Bubble HeatMap Chart

The Angular Bubble HeatMap Chart or the matrix bubble chart, visualizes data using variations in bubble attributes such as size, color, and sector.

• More details on Bubble HeatMap

Calendar HeatMap

The Angular Calendar HeatMap visualizes time series data, with each data point representing a value bound to a specific time.

Cell color range customization

Color ranges allow a color to be applied to specific ranges in HeatMap cells.