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](references/api-reference.md)

Getting Started & Installation

📄 Read: [references/getting-started.md](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](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](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](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](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](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](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

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.

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.

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

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

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

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