Implementing Syncfusion React HeatMap Chart

When to Use This Skill

• Visualizing 2D data patterns - Display matrix data with color-coded cells
• Creating heatmaps - Build interactive heatmaps with custom color schemes
• Analyzing correlations - Show relationships between row and column variables
• Displaying time-series patterns - Visualize activity over time periods
• Performance monitoring - Display metrics across multiple dimensions
• Data exploration - Reveal patterns in large datasets at a glance
• Configuring axes - Set up numerical, categorical, or datetime axes
• Customizing appearance - Apply custom colors, legends, and styling
• Handling user interaction - Implement selection, tooltips, and event handling
• Accessibility - Ensure keyboard navigation and screen reader support

Documentation and Navigation Guide

Getting Started

• Installation and setup steps
• Vite/React project configuration
• CSS imports and theme selection
• Basic component initialization
• When: Starting a new HeatMap implementation or setting up dependencies

Data Binding & Setup

• JSON data format and structure
• 2D array binding
• Data transformation techniques
• Loading and binding data dynamically
• When: Preparing data for the heatmap or learning data formats

Axes Configuration

• Numerical, categorical, and datetime axis types
• Axis properties and customization
• Inverted and opposed axis positioning
• Axis intervals and label formatting
• When: Setting up row/column headers or configuring axis behavior

Legend, Appearance & Styling

• Legend placement, format, and customization
• Color palettes and gradient configuration
• Sizing and dimension properties
• Rendering modes (SVG vs Canvas switching)
• Theme styling and CSS customization
• When: Customizing visual appearance, colors, or legends

Interaction & Selection

• Selection modes and cell highlighting
• Mouse events and event handlers
• Tooltip configuration and customization
• Cell interaction patterns and best practices
• When: Implementing user interaction or handling cell clicks/hovers

Advanced Features & Events

• Bubble heatmap implementation
• Complete event handling (select, click, hover, created)
• Automatic rendering mode switching
• Performance optimization for large datasets
• Custom rendering and cell styling
• When: Implementing advanced features or optimizing performance

API Reference

• Comprehensive component API: props, methods, events, and model schemas
• Quick lookup for

  cellSettings

  ,

  legendSettings

  ,

  paletteSettings

  ,

  xAxis

  ,

  yAxis

  ,

  titleSettings

  ,

  tooltipSettings

  , and common methods like

  export

  ,

  print

  ,

  clearSelection

• When: Adding or validating props, wiring events, or implementing advanced customizations

Accessibility & Troubleshooting

• WCAG compliance and accessibility features
• Keyboard navigation support
• ARIA attributes and screen reader support
• Common issues and solutions
• Migration from EJ1 to EJ2
• When: Ensuring accessibility or resolving issues

Quick Start

import * as React from 'react';
import { HeatMapComponent, Inject, Legend, Tooltip } from '@syncfusion/ej2-react-heatmap';
import '@syncfusion/ej2-base/styles/material.css';

export function App() {
  const data = [
    [73, 39, 26, 39, 94],
    [93, 58, 53, 38, 26],
    [54, 39, 26, 40, 42]
  ];

  return (
    <HeatMapComponent 
      id='heatmap'
      dataSource={data}
      xAxis={{ labels: ['A', 'B', 'C', 'D', 'E'] }}
      yAxis={{ labels: ['X', 'Y', 'Z'] }}
      showTooltip={true}
      cellRender={(args) => {
        args.displayText = args.value + '%';
      }}
    >
      <Inject services={[Legend, Tooltip]} />
    </HeatMapComponent>
  );
}

export default App;

Common Patterns

Pattern 1: Basic Data Visualization

// Visualize simple 2D data with default styling
<HeatMapComponent 
  dataSource={data}
  xAxis={{ labels: xLabels }}
  yAxis={{ labels: yLabels }}
>
  <Inject services={[Legend, Tooltip]} />
</HeatMapComponent>

Pattern 2: Custom Colors, Legend, and Tooltips

// Apply custom color palette with legend and styled tooltips
<HeatMapComponent 
  dataSource={data}
  paletteSettings={{
    type: 'Gradient',
    palette: [
      { value: 0, color: '#3498db' },
      { value: 50, color: '#2ecc71' },
      { value: 100, color: '#e74c3c' }
    ]
  }}
  legendSettings={{ position: 'Right', width: '150px' }}
  showTooltip={true}
  tooltipSettings={{
    fill: '#F5F5F5',
    textStyle: { color: '#333333', size: '13px' },
    border: { width: 1, color: '#999999' }
  }}
>
  <Inject services={[Legend, Tooltip]} />
</HeatMapComponent>

Pattern 3: Interactive Cell Handling

// Handle cell selection and display selected data
<HeatMapComponent 
  dataSource={data}
  cellSelected={(args) => {
    console.log(`Cell [${args.row}, ${args.column}] selected: ${args.value}`);
  }}
  cellRender={(args) => {
    args.displayText = args.value + ' units';
  }}
>
  <Inject services={[Legend, Tooltip]} />
</HeatMapComponent>

Key Props

dataSource

[[1,2],[3,4]]

xAxis

{ labels: ['A', 'B'] }

yAxis

{ labels: ['X', 'Y'] }

paletteSettings

{ type: 'Gradient', palette: [{value: 0, color: '#blue'}] }

cellRender

cellSelected

legendSettings

{ position: 'Right' }

showTooltip

true

false

tooltipSettings

{ fill: '#F5F5F5', textStyle: { color: '#333' } }

renderingMode

'Canvas'

Common Use Cases

1. Performance Dashboard - Display metrics across departments and time periods
2. Correlation Matrix - Visualize relationships between variables
3. Activity Heatmap - Show user engagement patterns by day/hour
4. Gene Expression - Analyze biological data with color intensity
5. Traffic Pattern - Visualize network/website traffic distribution
6. Survey Results - Display response patterns across questions and demographics