React Heatmap / Matrix

Copy Page

A grid where colour carries magnitude — the right tool for correlation matrices, wafer-lot yield grids, and calendar heatmaps, and the one generic chart libraries render worst. Every cell also prints its value, because colour is never the only channel.

Installation

Props

Colour that survives colour blindness

Both scales interpolate through CVD-safe stops — a viridis-like ramp for sequential data, a blue↔amber divergence for signed data. Neither relies on a red/green distinction, which roughly 8% of men cannot make, and the printed value is always present as a fallback. A cell's text colour is chosen from the luminance of its fill, so numbers stay legible at both ends of the ramp.

Use sequential for quantities with a natural zero (yield, count, duration) and diverging for values that straddle a meaningful midpoint (correlation from −1 to +1, deviation from target). Pick the wrong one and you either waste half the colour range or imply a midpoint that isn't there.

A null value renders as a dashed empty cell — "not measured", which is genuinely different from a measured zero and should never share its colour.