Implementing HeatMap

The HeatMap Chart component is a powerful visualization tool for displaying two-dimensional data where values are represented through color gradients or fixed colors. Perfect for analyzing patterns, correlations, and distributions in matrix data, time-series heatmaps, and any scenario requiring color-encoded data representation.

When to Use This Skill

Data Matrix Visualization: Display 2D data arrays with color-coded cells
Correlation Analysis: Visualize relationships between multiple variables
Time-Series Heatmaps: Show patterns over time (e.g., hourly/daily activity)
Category Comparison: Compare performance across categories and metrics
Intensity Mapping: Display heatmaps with gradient colors representing value intensity
Interactive Selection: Enable user selection of cells with tooltips and event handling
Accessibility Requirements: Implement WCAG-compliant heatmaps with ARIA support
Custom Styling: Apply themes, palettes, and custom rendering (SVG/Canvas)
Bubble Heatmaps: Visualize data as bubbles with size and color encoding
Large Datasets: Handle auto-switching between SVG and Canvas rendering modes

Component Overview

HeatMap is a flexible, high-performance visualization component with rich customization:

Axis Types: Numeric, Categorical, and DateTime axes
Data Binding: JSON arrays and 2D matrix formats
Rendering Modes: Auto-switching SVG (small data) and Canvas (large data)
Interactive Features: Cell selection, tooltips, data labels, events
Customization: Color palettes, themes, cell styling, borders
Accessibility: WCAG compliance, ARIA attributes, keyboard navigation
Legend Support: Automatic and custom legend rendering
Bubble Variant: Alternative bubble heatmap visualization
Standalone Ready: Compatible with Angular 19+ standalone components

Documentation and Navigation Guide

API Reference

📄 Read: references/api-reference.md

Getting Started & Installation

📄 Read: references/getting-started.md

Installing @syncfusion/ej2-angular-heatmap package
Module imports for Angular standalone and traditional modules
Creating your first heatmap
Basic data binding setup
Verifying installation works

Data Binding & Formats

📄 Read: references/data-binding.md

JSON array format for structured data
2D array format for matrix data
DataManager for remote data
Binding x/y axis fields
Live data updates and dynamic binding

Axes Configuration

📄 Read: references/axes-configuration.md

X/Y axis types: Numeric, Categorical, DateTime
Axis labels, titles, and intervals
Inverted axes and opposed positions
Axis customization and properties
Working with date/time data

Legend Rendering

📄 Read: references/legend-rendering.md

Legend positioning and alignment
Legend sizing and appearance
Custom legend data display
Interactive legend behavior
Legend label formatting

Visual Customization & Rendering

📄 Read: references/visual-customization.md

Color palettes and themes
SVG vs Canvas rendering modes
Cell styling and borders
Gradient and fixed colors
Bubble heatmap variations
Responsive design

Interactivity, Events & Accessibility

📄 Read: references/interactivity-events.md

Cell selection modes and events
Tooltip customization and templating
Data labels and formatting
Cell click and selection handlers
WCAG accessibility compliance
ARIA attributes and keyboard navigation
Screen reader support

Advanced Features & How-tos

📄 Read: references/advanced-features.md

EJ1 to EJ2 migration guide
How-to: Custom tooltip templates
How-to: Legend customization
How-to: Performance optimization for large datasets
Combining selection with data updates
Multi-dimensional data representation

Quick Start

Minimal HeatMap Setup

typescript

import { Component, ViewEncapsulation } from '@angular/core';
import { HeatMapModule } from '@syncfusion/ej2-angular-heatmap';

@Component({
    imports: [HeatMapModule],
    standalone: true,
    selector: 'app-heatmap',
    template: `
        <ejs-heatmap id='heatmap-container' 
            [dataSource]='dataSource'
            [xAxis]='xAxis'
            [yAxis]='yAxis'>
        </ejs-heatmap>
    `,
    encapsulation: ViewEncapsulation.None
})
export class HeatMapComponent {
    dataSource: any[] = [
        { ProductName: 'Milk', Year: 2005, Sales: 21, Quarter: 'Q1' },
        { ProductName: 'Milk', Year: 2006, Sales: 22, Quarter: 'Q1' },
        { ProductName: 'Milk', Year: 2007, Sales: 23, Quarter: 'Q1' },
        { ProductName: 'Bread', Year: 2005, Sales: 18, Quarter: 'Q1' },
        { ProductName: 'Bread', Year: 2006, Sales: 19, Quarter: 'Q1' },
        { ProductName: 'Bread', Year: 2007, Sales: 20, Quarter: 'Q1' }
    ];

    xAxis: any = {
        labels: ['2005', '2006', '2007'],
        type: 'Labels',
        opposedPosition: true
    };

    yAxis: any = {
        labels: ['Milk', 'Bread'],
        type: 'Labels'
    };
}

Common Patterns

Pattern 1: Sales Performance Matrix

Display product sales by year with color gradient representing performance levels.

typescript

dataSource = [
    { Product: 'Product A', Year: 2020, Sales: 50 },
    { Product: 'Product A', Year: 2021, Sales: 75 },
    { Product: 'Product B', Year: 2020, Sales: 60 },
    { Product: 'Product B', Year: 2021, Sales: 85 }
];

xAxis = { labels: ['2020', '2021'], type: 'Labels' };
yAxis = { labels: ['Product A', 'Product B'], type: 'Labels' };

When: Comparing performance metrics across multiple dimensions
Why: Color-coded cells make patterns immediately visible

Pattern 2: Time-Series Activity Heatmap

Show hourly or daily activity patterns with DateTime axis.

typescript

<ejs-heatmap [xAxis]='{ type: "DateTime", intervalType: "Days" }'
    [yAxis]='{ labels: ["12 AM", "1 AM", "2 AM", "3 AM"] }'>
</ejs-heatmap>

When: Analyzing time-based patterns (traffic, usage, activity)
Why: DateTime axis automatically formats and scales time data

Pattern 3: Interactive Cell Selection

Enable users to select cells and respond to selection events.

typescript

<ejs-heatmap [cellSettings]='{ border: { width: 1 } }'
    (cellSelected)='onCellSelect($event)'
    [allowSelection]='true'>
</ejs-heatmap>

onCellSelect(event: any) {
    console.log('Selected cell:', event.cellCollection);
}

When: Building interactive dashboards with drill-down capability
Why: Selection events enable dynamic filtering and detail views

Pattern 4: Custom Tooltip with Data Labels

Display detailed information on hover and within cells.

typescript

<ejs-heatmap [tooltip]='{ enable: true }'>
    <e-heatmap-cellsettings [showLabel]='true' 
        [labelFormat]='{ format: "{value}" }'>
    </e-heatmap-cellsettings>
</ejs-heatmap>

When: Users need detailed values without clicking
Why: Tooltips reduce cognitive load while maintaining clean appearance

Pattern 5: Bubble Heatmap Variation

Use bubbles instead of cells for alternative visualization.

typescript

<ejs-heatmap [renderingMode]='BubbleHeatMap'>
    <e-heatmap-cellsettings showLabel='true' bubbleType='Size'>
    </e-heatmap-cellsettings>
</ejs-heatmap>

When: Emphasizing value magnitude through bubble size
Why: Bubble size adds an additional visual dimension

Key Props

Data and Axes

```
dataSource
```
: Array of data objects (JSON format)
```
xAxis
```
: X-axis configuration (Labels, Numeric, DateTime)
```
yAxis
```
: Y-axis configuration (Labels, Numeric, DateTime)
```
valueBound
```
: Range of color gradient values [min, max]
```
cellSettings
```
: Cell appearance and labels

Legend and Display

```
legendSettings
```
: Legend positioning, alignment, and appearance
```
palette
```
: Color scheme array or predefined theme
```
title
```
: Heatmap title
```
height
```
,
```
width
```
: Chart dimensions

Interactivity

```
allowSelection
```
: Enable/disable cell selection
```
cellSelected
```
: Event fired on cell selection
```
cellRender
```
: Customize cell appearance
```
cellHover
```
: Hover event for cells
```
tooltipSettings
```
: Tooltip display configuration

Rendering

```
renderingMode
```
: SVG or Canvas mode
```
cellBorder
```
: Cell border configuration
```
showGradientLegend
```
: Display gradient legend

Common Use Cases

Use Case 1: Product Performance Dashboard

Display quarterly sales metrics across products using a heatmap. Color intensity shows performance level. Users click cells to see drill-down details.

Use Case 2: Server Activity Monitor

Track server CPU/memory usage by hour of day and day of week. Time-series heatmap with DateTime axes. Auto-switching Canvas mode for large datasets.

Use Case 3: Correlation Matrix

Visualize statistical correlations between multiple variables. Color gradients represent correlation strength. Hover tooltips show exact values.

Use Case 4: Website Traffic Heatmap

Analyze visitor traffic patterns by page and time. Bubble heatmap shows traffic volume. Selection enables filtering by time periods.

syncfusion-angular-heatmap

NPX Install

Tags

SKILL.md Content

Implementing HeatMap

When to Use This Skill

Component Overview

Documentation and Navigation Guide

API Reference

Getting Started & Installation

Data Binding & Formats

Axes Configuration

Legend Rendering

Visual Customization & Rendering

Interactivity, Events & Accessibility

Advanced Features & How-tos

Quick Start

Minimal HeatMap Setup

Common Patterns

Pattern 1: Sales Performance Matrix

Pattern 2: Time-Series Activity Heatmap

Pattern 3: Interactive Cell Selection

Pattern 4: Custom Tooltip with Data Labels

Pattern 5: Bubble Heatmap Variation

Key Props

Data and Axes

Legend and Display

Interactivity

Rendering

Common Use Cases

Use Case 1: Product Performance Dashboard

Use Case 2: Server Activity Monitor

Use Case 3: Correlation Matrix

Use Case 4: Website Traffic Heatmap