Heatmap Chart

Heatmap is a visualization tool that employs color the way a bar chart employs height and width in representing data.

WARNING

This feature is only available in AdminKit PRO. Learn more.

ApexCharts example

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",
  }
}
var chart = new ApexCharts(
  document.querySelector("#apexcharts-heatmap"),
  options
);
chart.render();