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

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

<script>
  function generateData(baseval, count, yrange) {
    var i = 0;
    var series = [];
    while (i < count) {
      series.push([
      	Math.floor(Math.random() * (750 - 1 + 1)) + 1, 
      	Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min, 
      	Math.floor(Math.random() * (75 - 15 + 1)) + 15
      ]);
      baseval += 86400000;
      i++;
    }
    return series;
  }
  
  var chart = new ApexCharts(
    document.querySelector('#apex-bubble-chart'), {
      chart: { height: 350, type: 'bubble', },
      dataLabels: { enabled: false },
      colors: [app.color.blue, app.color.orange, app.color.success, app.color.pink],
      series: [
        { name: 'Bubble1', data: generateData(new Date('11 Feb 2024 GMT').getTime(), 20, { min: 10, max: 60 }) },
        { name: 'Bubble2', data: generateData(new Date('11 Feb 2024 GMT').getTime(), 20, { min: 10, max: 60 }) },
        { name: 'Bubble3', data: generateData(new Date('11 Feb 2024 GMT').getTime(), 20, { min: 10, max: 60 }) },
        { name: 'Bubble4', data: generateData(new Date('11 Feb 2024 GMT').getTime(), 20, { min: 10, max: 60 }) }
      ],
      fill: { opacity: 0.8 },
      title: { text: 'Simple Bubble Chart' },
      xaxis: { tickAmount: 12, type: 'category' },
      yaxis: { max: 70 }
    }
  );

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