syncfusion-react-heatmap

Q: How do I install syncfusion-react-heatmap?

Run npx skills add https://github.com/syncfusion/react-ui-components-skills --skill syncfusion-react-heatmap in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-react-heatmap/ (personal) or .claude/skills/syncfusion-react-heatmap/ (project).

by syncfusionFrontend & Design

Implement Syncfusion React HeatMap Chart component for data visualization. Use this skill when user needs to create heatmaps, visualize 2D data patterns, display matrix data with color gradients, configure axes (numerical/categorical/datetime), implement legends, handle cell selection, apply custom styling, or work with large datasets. Covers installation, data binding, axis configuration, appearance customization, interaction patterns, tooltips, events, and accessibility.

Installs: 659
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/syncfusion/react-ui-components-skills --skill syncfusion-react-heatmap

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads syncfusion-react-heatmap automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Implementing Syncfusion React HeatMap Chart

The HeatMap component visualizes two-dimensional data using color gradients or fixed colors, making it ideal for analyzing patterns, correlations, and distributions across matrix data. Perfect for displaying heat patterns, activity matrices, performance data, and temporal correlations.

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

📄 Read: references/getting-started.md

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

📄 Read: references/data-binding.md

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

📄 Read: references/axes-configuration.md

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

📄 Read: references/legend-and-appearance.md

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

📄 Read: references/interaction-and-selection.md

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

📄 Read: references/advanced-features.md

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

📄 Read: references/api-reference.md

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

📄 Read: references/accessibility-and-troubleshooting.md

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

Prop	Type	Purpose	Example
`dataSource`	Array	2D data array or JSON	`[[1,2],[3,4]]`
`xAxis`	Object	Column axis configuration	`{ labels: ['A', 'B'] }`
`yAxis`	Object	Row axis configuration	`{ labels: ['X', 'Y'] }`
`paletteSettings`	Object	Color palette and gradient configuration	`{ type: 'Gradient', palette: [{value: 0, color: '#blue'}] }`
`cellRender`	Function	Custom cell formatting	Format display text
`cellSelected`	Function	Selection event handler	Track user selection
`legendSettings`	Object	Legend placement/format	`{ position: 'Right' }`
`showTooltip`	Boolean	Enable/disable tooltips	`true` or `false`
`tooltipSettings`	Object	Tooltip styling (fill, textStyle, border)	`{ fill: '#F5F5F5', textStyle: { color: '#333' } }`
`renderingMode`	String	SVG or Canvas	`'Canvas'` for large datasets

Common Use Cases

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

FAQ

What does the syncfusion-react-heatmap skill do?

How do I install syncfusion-react-heatmap?

Run npx skills add https://github.com/syncfusion/react-ui-components-skills --skill syncfusion-react-heatmap in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-react-heatmap/ (personal) or .claude/skills/syncfusion-react-heatmap/ (project).

Which AI agents can use syncfusion-react-heatmap?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is syncfusion-react-heatmap safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains syncfusion-react-heatmap?

It is published by syncfusion in syncfusion/react-ui-components-skills. It has 659 recorded installs.