<!-- required files -->
<script src="../assets/plugins/apexcharts/dist/apexcharts.min.js"></script>

<div id="apex-heatmap-chart"></div>

<script>
  function generateData(count, yrange) {
    var i = 0;
    var series = [];
    while (i < count) {
      var x = 'w' + (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 chart = new ApexCharts(
    document.querySelector('#apex-heatmap-chart'), {
      chart: { height: 350, type: 'heatmap', },
      dataLabels: { enabled: false },
      colors: [app.color.blue],
      stroke: { show: true, colors: [app.color.componentBg], width: 2, dashArray: 0 },
      series: [
        { name: 'Metric1', data: generateData(18, { min: 0, max: 90 }) },
        { name: 'Metric2', data: generateData(18, { min: 0, max: 90 }) },
        { name: 'Metric3', data: generateData(18, { min: 0, max: 90 }) },
        { name: 'Metric4', data: generateData(18, { min: 0, max: 90 }) },
        { name: 'Metric5', data: generateData(18, { min: 0, max: 90 }) },
        { name: 'Metric6', data: generateData(18, { min: 0, max: 90 }) },
        { name: 'Metric7', data: generateData(18, { min: 0, max: 90 }) },
        { name: 'Metric8', data: generateData(18, { min: 0, max: 90 }) },
        { name: 'Metric9', data: generateData(18, { min: 0, max: 90 }) }
      ],
      title: { text: 'HeatMap Chart (Single color)' }
    }
  );

  chart.render();
&lt;/script&gt;