# Heatmap

A two-axis matrix that shows intensity and reveals exact cell values.

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"use client";

import { FloodRoot, Heatmap } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Heatmap label="Requests by hour" columns={["08:00", "10:00", "12:00"]}
        rows={[
          {id:"mon", label:"Mon", values:[4, 13, 23]},
          {id:"tue", label:"Tue", values:[7, null, 32]}
        ]} max={40} />
    </FloodRoot>
  );
}
```

## Design notes

- Supply a value for each column. Values are finite and nonnegative; null represents a missing observation and gets a dashed tile. Zero is an observed value.
- Use the same max across matrices that should be compared. Hover, tap or use arrow keys to inspect exact values in a tooltip beside the cell. Home and End move within a row.
- Keep axis labels short at the target width. Provide formatValue and localized labels when needed.

## API reference

| Prop | Values | Default |
| --- | --- | --- |
| `label` | `string` | `Required` |
| `columns` | `readonly string[]` | `Required` |
| `rows` | `readonly { id: string; label: string; values: readonly (number \| null)[] }[]` | `Required` |
| `max` | `number` | `—` |
| `formatValue` | `(value: number) => string` | `—` |
| `missingLabel` | `string` | `"No data"` |
| `emptyLabel` | `string` | `"No observations"` |
| `Native HTML props` | `Omit<HTMLAttributes<HTMLDivElement>, "children">` | `Forwarded` |