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.

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.

Other frameworks

The HeatMap Chart control is also available in Angular, Vue, and Blazor frameworks that are built from their own TypeScript libraries.

• Angular HeatMap Chart features

• Vue HeatMap Chart features

• Blazor HeatMap Chart features

Other supported frameworks

The HeatMap Chart component is also available in Blazor, Vue, Angular, and JavaScript frameworks. Check out the different Heatmap Chart platforms from the following links:

• Blazor HeatMap Chart
• JavaScript HeatMap Chart
• Angular HeatMap Chart
• Vue HeatMap Chart

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 />);