Heatmap Chart

The heatmap chart is composible. <BeeHeatmapChart> is the container — pass a chartConfig whose keys match your intensity series. Flatten a row × column matrix with prepareHeatmapCells(), then compose <Heatmap /> with the resulting cells and optional axis labels. Add <Tooltip /> and <Legend /> when you want the shared BeeCharts chrome.

import {
  BeeHeatmapChart,
  Heatmap,
  Tooltip,
  Legend,
} from "@/components/beecharts/charts/heatmap-chart";
import { prepareHeatmapCells } from "@/lib/chart-recipes";

const rowLabels = ["Mon", "Tue", "Wed", "Thu", "Fri"];
const colLabels = ["9am", "12pm", "3pm", "6pm"];
const matrix = [
  [12, 28, 45, 22],
  [18, 35, 52, 30],
  [10, 22, 38, 18],
  [24, 42, 58, 36],
  [15, 30, 48, 26],
];
 
const { cells, min, max } = prepareHeatmapCells(rowLabels, colLabels, matrix);
 
const chartConfig = {
  intensity: {
    label: "Sessions",
    colors: {
      light: ["#fff7ed", "#f97316", "#9a3412"],
      dark: ["#431407", "#ea580c", "#fdba74"],
    },
  },
} satisfies ChartConfig;
 
<BeeHeatmapChart config={chartConfig} className="h-80 w-full">
  <Heatmap
    dataKey="intensity"
    data={cells}
    xLabels={colLabels}
    yLabels={rowLabels}
    min={min}
    max={max}
  />
  <Legend />
  <Tooltip />
</BeeHeatmapChart>

prepareHeatmapCells() returns flat { row, col, x, y, value } cells plus computed min / max for the visual map. Pass explicit min and max when you need a fixed scale across refreshes (for example, comparing weeks).

Session grid

Weekday × time-of-day activity — the default preview uses a warm amber scale so low traffic stays quiet and peaks read clearly.

Weekly density

A wider grid (seven days × eight slots) with a rose scale for dashboards that need finer time resolution.

Correlation matrix

Symmetric product × product scores — useful for affinity, co-purchase, or feature correlation views.

Team workload

Employee × day utilization for capacity planning — see also the calendar chart for single-person month views.

The chart is composed of a root container and declarative parts. Render the root, then compose the slots you need as children.

The root container. Owns chartConfig, the ECharts canvas, and the part registry that compiles heatmap options.

Registers matrix cells and axis labels with the ECharts compiler. Renders no DOM of its own.

Enables the shared BeeCharts HTML tooltip layer when composed.

Hides the built-in ECharts legend and reserves space for the shared BeeCharts legend chrome when composed.