Heatmap Chart

2D grid heatmap with custom color scales. Use cases: Thermal imaging (FLIR cameras), correlation matrices, pressure sensor arrays, PCB thermal maps, tactile sensor grids, seat occupancy.

Installation

Copy and paste the following code into your project.

npx @plexusui/cli add heatmap-chart

Manual Installation

1. Copy the component code from components/heatmap-chart.tsx

2. Install dependencies:

npm install react@latest

3. Copy any required primitive components

Examples

Real-Time System Monitor

Live CPU core usage tracking at 10 Hz - 30s rolling window across 16 cores

CPU Core Usage Monitor - 16 Cores

Update Rate: 10 Hz | Window: 30s | Data Points: 4800

Responsive Heatmap

Heatmap with responsive sizing and custom margins

Primitive Components

Build custom heatmaps with primitive components for full control

API Reference

HeatmapChart component for visualizing matrix data with color-encoded values

HeatmapChart (All-in-One)

Prop	Type	Default	Description
data	DataPoint[]	required	Array of data points. DataPoint: { x: string \| number, y: string \| number, value: number }
xAxis	{ label?: string, categories?: string[] }	{}	X-axis configuration with optional category labels
yAxis	{ label?: string, categories?: string[] }	{}	Y-axis configuration with optional category labels
colorScale	(value: number) => string	viridis	Color scale function for value visualization
minValue	number	auto	Minimum value for color scale
maxValue	number	auto	Maximum value for color scale
width	number	800	Chart width in pixels
height	number	400	Chart height in pixels
margin	{ top?: number, right?: number, bottom?: number, left?: number }	{ top: 40, right: 40, bottom: 60, left: 80 }	Chart margins
showGrid	boolean	false	Show grid lines
showAxes	boolean	true	Show axis labels and ticks
showTooltip	boolean	false	Show interactive tooltip on hover
preferWebGPU	boolean	true	Prefer WebGPU rendering over WebGL. Falls back automatically if unavailable
className	string	""	Additional CSS classes

DataPoint Type

Data structure for heatmap cells

Prop	Type	Default	Description
x	string \| number	required	X-axis category or coordinate
y	string \| number	required	Y-axis category or coordinate
value	number	required	Data value for color mapping

HeatmapChart.Root

Root component for building custom layouts with primitives

Prop	Type	Default	Description
data	DataPoint[]	required	Array of data points to plot
xAxis	{ label?: string, categories?: string[] }	{}	X-axis configuration
yAxis	{ label?: string, categories?: string[] }	{}	Y-axis configuration
colorScale	(value: number) => string	viridis	Color scale function
width	number	800	Chart width in pixels
height	number	400	Chart height in pixels
margin	{ top?: number, right?: number, bottom?: number, left?: number }	{ top: 40, right: 40, bottom: 60, left: 80 }	Chart margins
preferWebGPU	boolean	true	Prefer WebGPU rendering
children	ReactNode	undefined	Primitive components (Canvas, Axes, Tooltip, Legend)

Primitive Components

Use with HeatmapChart.Root for complete control over composition

Prop	Type	Default	Description
HeatmapChart.Canvas	component	-	Renders the heatmap cells. Props: showGrid?: boolean
HeatmapChart.Axes	component	-	Renders x and y axis with labels
HeatmapChart.Tooltip	component	-	Interactive tooltip showing cell values on hover
HeatmapChart.Legend	component	-	Color scale legend. Props: title?: string

Loading example...