var options = {
  series: [
    {
      name: 'Frontend',
      data: [
        {
          x: 'Design',
          y: [
            new Date('2024-03-05').getTime(),
            new Date('2024-03-08').getTime(),
          ],
        },
        {
          x: 'Code',
          y: [
            new Date('2024-03-08').getTime(),
            new Date('2024-03-11').getTime(),
          ],
        },
        {
          x: 'Test',
          y: [
            new Date('2024-03-11').getTime(),
            new Date('2024-03-16').getTime(),
          ],
        },
      ],
    },
    {
      name: 'Backend',
      data: [
        {
          x: 'Design',
          y: [
            new Date('2024-03-02').getTime(),
            new Date('2024-03-05').getTime(),
          ],
        },
        {
          x: 'Code',
          y: [
            new Date('2024-03-06').getTime(),
            new Date('2024-03-09').getTime(),
          ],
        },
        {
          x: 'Test',
          y: [
            new Date('2024-03-10').getTime(),
            new Date('2024-03-19').getTime(),
          ],
        },
      ],
    },
  ],
  chart: {
    height: 350,
    type: 'rangeBar',
  },
  title: {
    text: 'Frontend vs Backend Schedule',
  },
  plotOptions: {
    bar: {
      borderRadius: 10,
      horizontal: true,
    },
  },
  dataLabels: {
    enabled: true,
    formatter: function (val) {
      var diff = Math.round((val[1] - val[0]) / (1000 * 60 * 60 * 24))
      return diff + (diff > 1 ? ' days' : ' day')
    },
  },
  fill: {
    type: 'gradient',
    gradient: {
      shade: 'light',
      type: 'vertical',
      shadeIntensity: 0.25,
      gradientToColors: undefined,
      inverseColors: true,
      opacityFrom: 1,
      opacityTo: 1,
      stops: [50, 0, 100, 100],
    },
  },
  xaxis: {
    type: 'datetime',
  },
  legend: {
    position: 'top',
  },
}

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