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

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

<script>
  var options = {
    chart: { height: 350, type: 'area', },
    dataLabels: { enabled: false },
    stroke: { curve: 'smooth', width: 3 },
    colors: [app.color.pink, app.color.dark],
    series: [
      { name: 'series1', data: [31, 40, 28, 51, 42, 109, 100] }, 
      { name: 'series2', data: [11, 32, 45, 32, 34, 52, 41] }
    ],
    xaxis: {
      type: 'datetime',
      categories: ['2024-09-19T00:00:00', '2024-09-19T01:30:00', '2024-09-19T02:30:00', '2024-09-19T03:30:00', '2024-09-19T04:30:00', '2024-09-19T05:30:00', '2024-09-19T06:30:00'],
    },
    tooltip: { x: { format: 'dd/MM/yy HH:mm' } }
  };
  
  var chart = new ApexCharts(
    document.querySelector('#apex-area-chart'),
    options
  );

  chart.render();
</script>