JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/gantt/modules/gantt.js"></script>
<script src="https://code.highcharts.com/gantt/modules/exporting.js"></script>
<div id="container"></div>
CSS
#container {
max-width: 1000px;
margin: 1em auto;
}
JavaScript
// THE CHART
Highcharts.ganttChart('container', {
title: {
text: 'Simple Gantt Chart'
},
yAxis: {
tickInterval: 0,
/* labels: {
enabled: false
} */
},
series: [{
name: 'Project 1',
data: [{
id: 's',
name: 'Start prototype',
start: Date.UTC(2014, 10, 18),
end: Date.UTC(2014, 10, 20)
}, {
id: 'b',
name: 'Develop',
start: Date.UTC(2014, 10, 20),
end: Date.UTC(2014, 10, 25),
}, {
id: 'a',
name: 'Run acceptance tests',
start: Date.UTC(2014, 10, 23),
end: Date.UTC(2014, 10, 26)
}, {
name: 'Test prototype',
start: Date.UTC(2014, 10, 27),
end: Date.UTC(2014, 10, 29),
}]
}]
});