var options = {
  series: [
    {
      name: '2024',
      data: [
        {
          x: 'Jan',
          y: [-2, 6],
        },
        {
          x: 'Apr',
          y: [8, 18],
        },
        {
          x: 'Jul',
          y: [18, 29],
        },
        {
          x: 'Oct',
          y: [7, 16],
        },
      ],
    },
    {
      name: '2025',
      data: [
        {
          x: 'Jan',
          y: [0, 7],
        },
        {
          x: 'Apr',
          y: [9, 20],
        },
        {
          x: 'Jul',
          y: [19, 31],
        },
        {
          x: 'Oct',
          y: [8, 17],
        },
      ],
    },
  ],
  chart: {
    type: 'rangeBar',
    height: 350,
  },
  title: {
    text: 'Monthly Temperature Range',
    align: 'left',
  },
  plotOptions: {
    bar: {
      horizontal: false,
    },
  },
  dataLabels: {
    enabled: true,
  },
  stroke: {
    width: 2,
    colors: ['#fff'],
  },
  yaxis: {
    labels: {
      formatter: function (val) {
        return val + '°C'
      },
    },
  },
}

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()