# React Heatmap Chart

A React heatmap chart with ApexCharts in AdminKit PRO: a grid of cells shaded by value, with color ranges from the theme for light and dark mode.

> This component is only available in **AdminKit PRO**. [Learn more](/pricing/#react).

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](/react/) has one, drawn with the `ApexChart` component around [ApexCharts](https://apexcharts.com/). [Chart setup](/react/docs/charts/overview/#apexcharts) describes that component.

## Example

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

```html
<div id="apexcharts-heatmap"></div>

<script>
function generateData(count, yrange) {
  var data = [];
  for (var i = 0; i < count; i++) {
    data.push({
      x: (i + 1).toString(),
      y: Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min
    });
  }
  return data;
}

var series = [];
for (var i = 0; i < 9; i++) {
  series.push({ name: "Metric" + (i + 1), data: generateData(20, { min: 0, max: 90 }) });
}

var options = {
  chart: {
    height: 350,
    type: "heatmap",
  },
  dataLabels: {
    enabled: false
  },
  colors: ["#008FFB"],
  series: series,
  xaxis: {
    type: "category",
  }
}
adminkit.apexcharts("#apexcharts-heatmap", function () {
  return options;
});
</script>
```
```tsx code
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.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `options` | `(theme: Theme) => ApexOptions` | | The ApexCharts options, with `series` and `chart.type`. Called again with the new colors when the color mode changes |

## Colors

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:

```tsx
<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" },
          ],
        },
      },
    },
  })}
/>
```

## Accessibility

- 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>`.

## Related

- [Next.js heatmap chart](/nextjs/docs/charts/heatmap-chart/): the same chart in AdminKit for Next.js
- [Bootstrap 5 heatmap chart](/bootstrap/docs/charts/heatmap-chart/): the ApexCharts example of the HTML version
- [Chart setup](/react/docs/charts/overview/): the `ApexChart`, `ChartJs` and `VectorMap` components
- [React treemap chart](/react/docs/charts/treemap-chart/): values as the size of rectangles
- [ApexCharts demo](https://react-demo.adminkit.io/charts-apexcharts)

---

Canonical HTML page: https://adminkit.io/react/docs/charts/heatmap-chart/

Site overview for agents: https://adminkit.io/llms.txt (expanded: https://adminkit.io/llms-full.txt) · Documentation: https://adminkit.io/bootstrap/docs/ · Questions: support@adminkit.io