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

Value

0.0100.0

Real-Time WebGPU Memory Monitor

Live GPU memory allocation tracking - 16.0GB VRAM across 32 regions

WebGPU Memory Allocation Map - 32 Regions × 64 Blocks

Total VRAM: 16.0GB | Used: 3.20GB (20.0%) | Block Size: 8MB

Value

10.030.0

Large-Scale Heatmap

High-density heatmap with 1500 data points showing WebGPU performance

Responsive Heatmap

Heatmap with responsive sizing and custom margins

Value

0.11.0

Primitive Components

Build custom heatmaps with primitive components for full control

Activity Level

10.979.8

Loading example...