build69
build69  /  Components  /  Charts  /  HeatmapChart

HeatmapChart

v1.0.5Updated 25 Jul 2026

2D grid heatmap with sequential / diverging / categorical colour scales, hover tooltip, axis labels, and tonal palettes. Use for matrices like retention or hour-of-day activity.

Preview

Live · 7 stories
Retention MatrixOpen ↗
Why this is recommendedchartheatmapmatrixretention+1

HeatmapChart — retention matrix.

Recommended for+14
  • Retention matrices
  • Hour × day-of-week heatmaps
  • Risk scoring grids
Tags+6
chartheatmapmatrixretentiondata-viz
Features+4
  • Sequential / diverging / categorical colour scales
  • Hover tooltip per cell
  • Axis labels (x + y)
  • Tonal palettes
  • Configurable cell size + gap
  • i18n: numbers/axis values format per LocaleProvider locale
Not recommended for−2
  • Single time-series (use LineChart)
  • Categorical comparison (use BarChart)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "HeatmapChart" })

Usage

import { HeatmapChart } from '@/components/data-viz/heatmap-chart';

<HeatmapChart data={retention} scale="sequential" />

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
data

Cells (x, y, value)

HeatmapCell[]yes
scale

Colour scale

'sequential' | 'diverging' | 'categorical'

Related