JSFiddle - React, Tailwind, and code Playground

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>

<div id="container"></div>

JavaScript

const chart = Highcharts.chart('container', {
   chart: {
     type: 'xrange'
   },
   title: {
     text: 'Simple X-range Chart'
   },
   xAxis: {
     type: 'datetime'
   },
   yAxis: {
     title: {
       text: ''
     },
     categories: ['Prototyping', 'Development', 'Testing'],
     reversed: true
   },
   series: [{
     name: 'Project 1',
     data: [{
       x: Date.UTC(2023, 10, 21),
       x2: Date.UTC(2023, 11, 2),
       name: 'Start prototype',
       y: 0,
     }, {
       x: Date.UTC(2023, 11, 2),
       x2: Date.UTC(2023, 11, 5),
       name: 'Develop',
       y: 1
     }, {
       x: Date.UTC(2023, 11, 10),
       x2: Date.UTC(2023, 11, 23),
       name: 'Run acceptance tests',
       y: 2
     }]
   }]
 });