# Heatmap

> Grid of cells shaded by value, for patterns across two dimensions (weekday × hour, week × day).

Component · Charts · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/Heatmap/)

Grid of cells shaded by value, for patterns across two dimensions (weekday × hour, week × day).

Props: `rows`, `cols` (labels), `values` (rows × cols numbers), `colEvery` (label every nth column), `caption`, `format(v)`, `label`.

- Five steps of one hue (mint-ink mixed into the surface), so it reads by lightness in both themes and for color-blind viewers.
- The footer shows the hovered cell's exact value; keep the Less–More scale visible.

## Example

```tsx
import { Heatmap } from "@twentyfirstmedia/pro";

const vals = [0, 1, 2, 3, 4, 5, 6].map((d) =>
  Array.from(
    {
      length: 24,
    },
    (_, hr) => {
      const w = d < 5 ? 1 : 0.35;
      return Math.round(
        48 *
          w *
          (Math.exp(-Math.pow((hr - 11) / 3.2, 2)) +
            0.7 * Math.exp(-Math.pow((hr - 16) / 2.6, 2))) +
          ((d * 31 + hr * 17) % 7),
      );
    },
  ),
);
export default function Preview() {
  return (
    <div className="tf-panel">
      <div>
        <h3 className="tf-panel-title">When people sign up</h3>
        <p className="tf-panel-sub">By weekday and hour</p>
      </div>
      <Heatmap
        rows={["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]}
        cols={Array.from(
          {
            length: 24,
          },
          (_, i) => (i < 10 ? "0" : "") + i,
        )}
        colEvery={3}
        values={vals}
        caption="Hover a cell for the count"
        format={(v) => v + " sign-ups"}
      />
    </div>
  );
}
```

## Props

### Heatmap

| Prop | Type | Notes |
| --- | --- | --- |
| `rows` | `string[]` | Required |
| `cols` | `string[]` | Required |
| `values` | `number[][]` | Required |
| `colEvery?` | `number` |  |
| `caption?` | `string` |  |
| `format?` | `(v: number) => string` |  |
| `label?` | `string` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |