Heatmap

Standalone grid heatmap. Color-encodes values in a 2D grid with configurable color scale.

Primitive: ChartHeatmap· Standalone (no ChartRoot needed)

Interactive demo

Usage

import { ChartHeatmap } from '@ramtt/charts'

<ChartHeatmap
  data={matrix}
  xLabels={['Mon','Tue','Wed','Thu','Fri']}
  yLabels={['6am','9am','12pm','3pm','6pm']}
  colorScale={[
    { value: 0, color: '#f0f9ff' },
    { value: 100, color: '#3b82f6' },
  ]}
/>

Props

PropTypeDefaultDescription
data*(number | null)[][]—2D data matrix
colorScale*ColorStop[]—Color interpolation stops
xLabelsstring[]—Column labels
yLabelsstring[]—Row labels
cellSizenumber14Cell size in pixels
showValuesbooleanfalseShow values in cells