JSFiddle - React, Tailwind, and code Playground

by Fusher

HTML

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

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

JavaScript

// Data from AJAX
var data = [
    "a",
    "Thu, 08 Jun 2017 00:00:00 GMT",
    "a",
    "Wed, 26 Jul 2017 00:00:00 GMT",
    "a",
    "Wed, 09 Aug 2017 00:00:00 GMT",
    "a",
    "Thu, 08 Jun 2017 00:00:00 GMT",
    "a",
    "Thu, 04 May 2017 00:00:00 GMT",
    "gggggg",
    "Thu, 29 Jun 2017 00:00:00 GMT",
    "A",
    "Thu, 08 Jun 2017 00:00:00 GMT",
    "A",
    "Wed, 26 Jul 2017 00:00:00 GMT",
    "A",
    "Wed, 09 Aug 2017 00:00:00 GMT"
  ],
  parsedData = [];

// Parsing data
var tasksPosition = ['a', 'A', 'gggggg'];
data.forEach((p, i) => { 
 if (i % 2)
 	parsedData.push({
 		start: Date.parse(p),
    taskName: data[i-1],
    milestone: true,
    y: tasksPosition.indexOf(data[i-1])
  }); 
});

Highcharts.ganttChart('container', {
  title: {
    text: 'Gantt Chart Test'
  },
  yAxis: {
  	categories: tasksPosition
  },
  xAxis: {
    currentDateIndicator: true,
    min: Date.UTC(2017, 3, 1),
    max: Date.UTC(2017, 10, 1)
  },

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