JSFiddle - React, Tailwind, and code Playground

by Black Label

HTML

<script src="https://github.highcharts.com/gantt/highcharts-gantt.src.js"></script>

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

JavaScript

var today = +new Date(),
	day = 24 * 3600 * 1000;

var data = [
	{start: 1496880000000, taskName: 'X', milestone: true, y: 0},
	{start: 1501027200000, taskName: 'Y', milestone: true, y: 0},
	{start: 1496880000000, taskName: 'Z', milestone: true, y: 1},
	{start: 1502236800000, taskName: 'Z1', milestone: true, y: 1},
];

Highcharts.ganttChart('container', {
  title: {
    text: 'Gantt Chart Test'
  },
  yAxis: {
  	categories: ['A', 'B']
  },
  xAxis: {
    min: today - (183/1) * day,
    max: today + 45 * day
  },

  series: [{
    name: 'Product',
    data: data
  }]
});