Heatmap

Use Heatmap

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

"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