syncfusion-angular-heatmap

What this skill does

# 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

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