Heatmap

Heatmap

Grid-based heatmap with color-scaled cells. Includes a calendar heatmap variant (year and month views). Supports custom symbols, cell selection, tooltips, and multi-axis layouts.

Import

import {
  Heatmap,
  HeatmapSeries,
  HeatmapCell,
  CalendarHeatmap
} from 'reaviz';

Heatmap Props

HeatmapSeries Props

HeatmapCell Props

CalendarHeatmap Props

Extends Heatmap props with:

Basic Usage

const data = [
  { key: 'Jan', data: [
    { key: 'Low', data: 5 },
    { key: 'Med', data: 8 },
    { key: 'High', data: 12 },
  ]},
  { key: 'Feb', data: [
    { key: 'Low', data: 3 },
    { key: 'Med', data: 10 },
    { key: 'High', data: 7 },
  ]},
];

<Heatmap
  height={250}
  width={400}
  data={data}
/>

Named Color Scheme

<Heatmap
  data={data}
  series={<HeatmapSeries colorScheme="OrRd" />}
/>

Custom Color Range

<Heatmap
  data={data}
  series={
    <HeatmapSeries colorScheme={['#f0f9e8', '#08589e']} />
  }
/>

Custom Cell Symbols

<Heatmap
  data={data}
  series={
    <HeatmapSeries
      colorScheme="OrRd"
      cell={
        <HeatmapCell
          symbol={() => (
            <circle r={14} transform="translate(14, 14)" />
          )}
        />
      }
    />
  }
/>

Cell Selection

const [active, setActive] = useState([]);

<Heatmap
  data={data}
  series={
    <HeatmapSeries
      selections={active}
      cell={
        <HeatmapCell
          cursor="pointer"
          => setActive([e.value])}
        />
      }
    />
  }
/>

Calendar Heatmap (Year View)

const calendarData = [
  { key: new Date('2024-01-01'), data: 3 },
  { key: new Date('2024-01-02'), data: 7 },
  { key: new Date('2024-01-03'), data: 1 },
  // ... one entry per day
];

<CalendarHeatmap
  height={115}
  width={715}
  data={calendarData}
  view="year"
/>

Calendar Heatmap (Month View)

<CalendarHeatmap
  height={115}
  width={100}
  data={monthData}
  view="month"
/>

Custom Tooltip Content

<HeatmapSeries
  cell={
    <HeatmapCell
      tooltip={
        <ChartTooltip
          content={(d) => `${d.data.key}: ${d.data.value}`}
        />
      }
    />
  }
/>

No Padding (Tight Grid)

<Heatmap
  data={data}
  series={<HeatmapSeries padding={0} />}
/>

Notes

• Color scheme maps cell values to a color range using D3 scales
• Named schemes (e.g. "OrRd") from D3 chromatic are supported alongside custom arrays
• Cells animate in with staggered delay based on index
• Tooltips are auto-disabled for transparent/empty cells
• CalendarHeatmap transforms flat { key: Date, data: number } into the nested grid structure internally
• CalendarHeatmap default tooltip shows "date · value" format