React Heatmap Chart

A heatmap shows where values run high or low across a grid. Each series is a row and each category a cell, and a higher value gets a darker shade, so the busy spots stand out.

The ApexCharts demo page of AdminKit for React has one, drawn with the ApexChart component around ApexCharts. Chart setup describes that component.

ExampleCopy Anchor Link

The example fills nine rows of 20 cells with random values from 0 to 90, like the HTML version.

import { ApexChart } from "@/components/plugins/apexcharts";

const generateData = (count: number, yrange: { min: number; max: number }) =>
  Array.from({ length: count }, (_, i) => ({
    x: (i + 1).toString(),
    y: Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min,
  }));

// Random once per page load, so a color mode change keeps the same cells
const series = Array.from({ length: 9 }, (_, i) => ({
  name: `Metric${i + 1}`,
  data: generateData(20, { min: 0, max: 90 }),
}));

export function MetricsHeatmap() {
  return (
    <div className="position-relative" style={{ minHeight: 365 }}>
      <ApexChart
        options={() => ({
          chart: { height: 350, type: "heatmap" },
          dataLabels: { enabled: false },
          colors: ["#008FFB"],
          series,
          xaxis: { type: "category" },
        })}
      />
    </div>
  );
}

As in the demo, the series are generated outside options. The wrapper calls options again on every color mode change, and data generated inside it would change all the cells.

PropsCopy Anchor Link

ColorsCopy Anchor Link

Each row is drawn in shades of one color, lighter for low values. The example keeps the fixed #008FFB of the HTML version. colors: [theme.primary] uses the primary color of the theme instead.

In dark mode, only the tooltips switch to dark. The wrapper does not turn on ApexCharts' own dark theme (theme.mode), because it shades heatmaps towards black.

When your values fall into fixed bands, such as low, medium and high, give each band a color from the theme with plotOptions.heatmap.colorScale.ranges. The legend then lists the bands by name:

<ApexChart
  options={(theme) => ({
    chart: { height: 350, type: "heatmap" },
    dataLabels: { enabled: false },
    series,
    plotOptions: {
      heatmap: {
        colorScale: {
          ranges: [
            { from: 0, to: 30, color: theme.success, name: "Low" },
            { from: 31, to: 60, color: theme.warning, name: "Medium" },
            { from: 61, to: 90, color: theme.danger, name: "High" },
          ],
        },
      },
    },
  })}
/>

AccessibilityCopy Anchor Link

• A shade is hard to read as a number. dataLabels: { enabled: true } writes the value in each cell. With 180 cells, check that they stay legible at your chart width.
• With color ranges, the legend names each band, so the colors have a key.
• The value of a cell shows in the tooltip on hover only.
• Give the chart role="figure" and an aria-label that says what it shows. ApexChart passes both to its <div>.

RelatedCopy Anchor Link

• Next.js heatmap chart: the same chart in AdminKit for Next.js
• Bootstrap 5 heatmap chart: the ApexCharts example of the HTML version
• Chart setup: the ApexChart, ChartJs and VectorMap components
• React treemap chart: values as the size of rectangles
• ApexCharts demo