React HeatMap Chart - Visualize Matrix Data Effectively

Overview

The React HeatMap Chart is a graphical representation of two-dimensional data where values are represented with gradient or solid color variations. The data points are rendered as HeatMap cells using Scalable Vector Graphics (SVG) or canvas UI rendering.

React HeatMap Chart Code Example

Easily get started with the React HeatMap Chart using a few simple lines of TS code, as demonstrated below. Also explore our React HeatMap Chart example that shows you how to render and configure the HeatMap Chart in React.

import * as React from 'react';
import { HeatMapComponent, Legend, Tooltip, Inject } from '@syncfusion/ej2-react-heatmap';
function App() {
        return (<HeatMapComponent
          id="heatmap-container"
          titleSettings=
          xAxis=
          yAxis=
          dataSource={[
            [73, 39, 26, 39, 94, 0],
            [93, 58, 53, 38, 26, 68],
            [99, 28, 22, 4, 66, 90],
            [14, 26, 97, 69, 69, 3],
            [7, 46, 47, 47, 88, 6],
            [41, 55, 73, 23, 3, 79],
            [56, 69, 21, 86, 3, 33],
            [45, 7, 53, 81, 95, 79],
            [60, 77, 74, 68, 88, 51],
            [25, 25, 10, 12, 78, 14],
            [25, 56, 55, 58, 12, 82],
            [74, 33, 88, 23, 86, 59],
          ]}
        >
          <Inject services={[Legend, Tooltip]} />
        </HeatMapComponent>);
}
export default App;
const root = createRoot(document.getElementById('sample'));
root.render(<App />);

Dealing with large data

Though the React HeatMap Chart can render data points using both SVG and canvas modes, it uses canvas rendering mode while displaying large volumes of data for the best initial load performance and optimized memory usage.

• Rendering mode documentation

Data binding

The HeatMap Chart can be bound to data using JSON or an array of objects. JSON data can be local or remote, and it can be retrieved using different adaptors. The JSON data can be nested as well.

• Data binding documentation

Bubble HeatMap Chart

The React Bubble HeatMap Chart or the matrix bubble chart, visualizes data using variations in bubble attributes such as size, color, and sector.

• More details on Bubble HeatMap Chart

Calendar HeatMap

The React calendar HeatMap visualizes time series data with each data point representing a value bound to a specific time.

Cell color range customization

Color ranges allow a color to be applied to specific ranges in heatmap cells.