# Bootstrap 5 Heatmap Chart

Heatmap charts represent data with color, the way a bar chart uses height and width.

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

## ApexCharts example

`adminkit.apexcharts()` renders the chart and updates it when the [color mode](/bootstrap/docs/getting-started/dark-mode/#charts-and-maps) changes.

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

<script>
function generateData(count, yrange) {
  var i = 0;
  var series = [];
  while (i < count) {
    var x = (i + 1).toString();
    var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
    series.push({
      x: x,
      y: y
    });
    i++;
  }
  return series;
}
var options = {
  chart: {
    height: 350,
    type: "heatmap",
  },
  dataLabels: {
    enabled: false
  },
  colors: ["#008FFB"],
  series: [{
      name: "Metric1",
      data: generateData(20, {
        min: 0,
        max: 90
      })
    },
    {
      name: "Metric2",
      data: generateData(20, {
        min: 0,
        max: 90
      })
    },
    {
      name: "Metric3",
      data: generateData(20, {
        min: 0,
        max: 90
      })
    },
    {
      name: "Metric4",
      data: generateData(20, {
        min: 0,
        max: 90
      })
    },
    {
      name: "Metric5",
      data: generateData(20, {
        min: 0,
        max: 90
      })
    },
    {
      name: "Metric6",
      data: generateData(20, {
        min: 0,
        max: 90
      })
    },
    {
      name: "Metric7",
      data: generateData(20, {
        min: 0,
        max: 90
      })
    },
    {
      name: "Metric8",
      data: generateData(20, {
        min: 0,
        max: 90
      })
    },
    {
      name: "Metric9",
      data: generateData(20, {
        min: 0,
        max: 90
      })
    }
  ],
  xaxis: {
    type: "category",
  }
}
adminkit.apexcharts("#apexcharts-heatmap", function () {
  return options;
});
</script>
```

---

Canonical HTML page: https://adminkit.io/bootstrap/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