JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://github.highcharts.com/gantt/highcharts.src.js"></script>
<script src="https://github.highcharts.com/gantt/modules/gantt.src.js"></script>
<div id="container"></div>
JavaScript
var days = 24 * 60 * 60 * 1000;
Highcharts.ganttChart('container', {
yAxis: {
type: 'category',
categories: ['Apples', 'Pears']
},
series: [{
data: [{
name: 'Apple 1',
y: 0,
start: 1 * days,
end: 2 * days
}, {
name: 'Apple 2',
y: 0,
start: 3 * days,
end: 4 * days
}, {
name: 'Pear',
y: 1,
start: 1 * days,
end: 4 * days
}]
}]
});