Advanced Timeline in JavaScript

var options = {
  series: [
    {
      name: 'Alice',
      data: [
        {
          x: 'Design',
          y: [
            new Date('2024-03-05').getTime(),
            new Date('2024-03-08').getTime(),
          ],
        },
        {
          x: 'Code',
          y: [
            new Date('2024-03-02').getTime(),
            new Date('2024-03-05').getTime(),
          ],
        },
        {
          x: 'Code',
          y: [
            new Date('2024-03-05').getTime(),
            new Date('2024-03-07').getTime(),
          ],
        },
        {
          x: 'Test',
          y: [
            new Date('2024-03-03').getTime(),
            new Date('2024-03-09').getTime(),
          ],
        },
        {
          x: 'Test',
          y: [
            new Date('2024-03-08').getTime(),
            new Date('2024-03-11').getTime(),
          ],
        },
        {
          x: 'Validation',
          y: [
            new Date('2024-03-11').getTime(),
            new Date('2024-03-16').getTime(),
          ],
        },
        {
          x: 'Design',
          y: [
            new Date('2024-03-01').getTime(),
            new Date('2024-03-03').getTime(),
          ],
        },
      ],
    },
    {
      name: 'Ravi',
      data: [
        {
          x: 'Design',
          y: [
            new Date('2024-03-02').getTime(),
            new Date('2024-03-05').getTime(),
          ],
        },
        {
          x: 'Test',
          y: [
            new Date('2024-03-06').getTime(),
            new Date('2024-03-16').getTime(),
          ],
          goals: [
            {
              name: 'Break',
              value: new Date('2024-03-10').getTime(),
              strokeColor: '#CD2F2A',
            },
          ],
        },
        {
          x: 'Code',
          y: [
            new Date('2024-03-03').getTime(),
            new Date('2024-03-07').getTime(),
          ],
        },
        {
          x: 'Deployment',
          y: [
            new Date('2024-03-20').getTime(),
            new Date('2024-03-22').getTime(),
          ],
        },
        {
          x: 'Design',
          y: [
            new Date('2024-03-10').getTime(),
            new Date('2024-03-16').getTime(),
          ],
        },
      ],
    },
    {
      name: 'Mia',
      data: [
        {
          x: 'Code',
          y: [
            new Date('2024-03-10').getTime(),
            new Date('2024-03-17').getTime(),
          ],
        },
        {
          x: 'Validation',
          y: [
            new Date('2024-03-05').getTime(),
            new Date('2024-03-09').getTime(),
          ],
          goals: [
            {
              name: 'Break',
              value: new Date('2024-03-07').getTime(),
              strokeColor: '#CD2F2A',
            },
          ],
        },
      ],
    },
  ],
  chart: {
    height: 450,
    type: 'rangeBar',
  },
  title: {
    text: 'Sprint Schedule by Team Member',
  },
  plotOptions: {
    bar: {
      horizontal: true,
      barHeight: '80%',
    },
  },
  xaxis: {
    type: 'datetime',
  },
  stroke: {
    width: 1,
  },
  fill: {
    type: 'solid',
    opacity: 0.6,
  },
  legend: {
    position: 'top',
    horizontalAlign: 'left',
  },
}

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