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.

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

Selection

In the HeatMap Chart, the cell selection is used to select single or multiple cells at runtime. The selected cell details are obtained via the built-in event and can be used for external processing.

• Selection 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.

Other supported frameworks

The HeatMap Chart is also available in Blazor, React, Vue, and JavaScript frameworks. Check out the different HeatMap Chart platforms from the links below,

• Blazor HeatMap Chart
• React HeatMap Chart
• Vue HeatMap Chart
• JavaScript HeatMap Chart

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'],
  };
}