Dither Heatmap

Pro

Ink

Ink, dark mode

Cell size24pxGap2px

<DitherHeatmap cellSize={24} />

Installation

ProRequires a Planes Pro license.

npx shadcn add @useplanes/dither-heatmap

Works once the @useplanes registry is set up in your project (one-time). After that, copy and run commands directly.

Unlock with Planes Pro

$99 once · 132 Pro components · lifetime updates.

<DitherHeatmap
  rows={["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]}
  cols={hours}
  values={activity}
  ink="#1d4ed8"
  inkDark="#93c5fd"
/>

Usage by hour
When your product is busiest, weekday by hour, on a dashboard that is already full of colour.
Correlation matrix
Which metrics move together, read as print density rather than a rainbow.
Calendar heat
Weeks by days for commits, deploys or sales without a colour scale to explain.
Editorial data
A matrix in a long-form piece that matches the type instead of fighting it.