Heatmap
Two-dimensional heatmap with band scales and color-mix cell interpolation.
Category: chart · WCAG 2.1-AA · chart, heatmap, matrix, data-viz
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | { x: string; y: string; value: number }[] | — | Array of x/y/value triples |
title | string | — | Title text for the component. |
description | string | — | Supporting description text. |
width | number | — | Fixed SVG width in px. ⚠ **Omit for a responsive chart** — the chart fills and tracks its container via a ResizeObserver; there is no correct pixel number in a responsive grid. A fixed width is clamped to the container (max-inline-size: 100%) so it can never overflow its card, but it also stops the chart growing. `useChartSize` is NOT needed for this — charts call it internally. |
height | number | 320 | SVG height in px. Unlike `width`, height does NOT track the container — this is the knob you set to change the chart's aspect. |
className | string | — | Additional CSS class names merged onto the root element. |
plain | boolean | false | Marks only — no axes, grid lines, or legend. For micro/inline charts. |
visualMap | VisualMapOptions | — | Map cell value → CVD-safe colour (continuous or piecewise) via a keyboard-operable legend that filters the visible range. |
toolbox | boolean | ToolboxOptions | — | Render a keyboard-reachable toolbox — PNG/SVG export, a data-view table toggle, and restore (reset the visualMap filter). |
Design tokens
--cascivo-chart-1--cascivo-color-neutral-100
When to use
- Showing magnitude across two categorical dimensions as a color-coded matrix
- Spotting patterns, clusters, or hotspots in dense grid data
When not to use
- Reading precise values — color encoding is approximate
- A single-dimension comparison — use BarChart
Examples
Basic heatmap
import { Heatmap } from '@cascivo/charts'
const data = [
{x:'Mon',y:'AM',value:10},{x:'Mon',y:'PM',value:20},
{x:'Tue',y:'AM',value:15},{x:'Tue',y:'PM',value:5},
]
<Heatmap data={data} title="Activity" />Related components
- Treemap — Use for part-to-whole hierarchical magnitude rather than a grid