JSFiddle - React, Tailwind, and code Playground
HTML
<div id="chartdiv"></div>
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/dark.js"></script>
<script src="http://www.amcharts.com/lib/3/gantt.js"></script>
CSS
#chartdiv {background: #3f3f4f;color:#ffffff;
width : 100%;
height : 500px;
font-size : 11px;
}
width : 100%;
height : 500px;
font-size : 11px;
}
JavaScript
AmCharts.useUTC = true;
function convertDate(dateConvert) {
return new Date(eval(dateConvert.match(/[0-9]+/gi).join(','))).getDate();
}
function convertDateStart(dateConvert) {
var data = new Date(eval(dateConvert.match(/[0-9]+/gi).join(',')));
var day = (data.getDate() < 10) ? data.getDate()+'0' : data.getDate();
var month= (data.getMonth() < 10) ? data.getMonth()+'0' : data.getMonth();
var year = data.getFullYear();
return [day, month, year].join("-");
}
var atividades = [];
var collection = [{
"Codigo": 7,
"Descricao": "Atividade 1",
"CodigoMilestone": 6,
"TempoRevisado": 2,
"Inicio": "\/Date(1445738400000)\/",
"InicioCedo": "\/Date(1445738400000)\/",
"InicioTarde": "\/Date(-62135589600000)\/",
"TerminoCedo": "\/Date(1445911200000)\/",
"TerminoTarde": "\/Date(-62135589600000)\/",
"Ativo": true,
"Milestone": null,
"Dependencia": [],
"Dependencia1": []
}, {
"Codigo": 8,
"Descricao": "Ativade 2",
"CodigoMilestone": 6,
"TempoRevisado": 2,
"Inicio": "\/Date(1445997600000)\/",
"InicioCedo": "\/Date(1445997600000)\/",
"InicioTarde": "\/Date(1445911200000)\/",
"TerminoCedo": "\/Date(1446084000000)\/",
"TerminoTarde": "\/Date(1446084000000)\/",
"Ativo": true,
"Milestone": null,
"Dependencia": [],
"Dependencia1": []
}, {
"Codigo": 9,
"Descricao": "Ativade 3",
"CodigoMilestone": 6,
"TempoRevisado": 2,
"Inicio": "\/Date(1445997600000)\/",
"InicioCedo": "\/Date(1445997600000)\/",
"InicioTarde": "\/Date(1445911200000)\/",
"TerminoCedo": "\/Date(1446084000000)\/",
"TerminoTarde": "\/Date(1446084000000)\/",
"Ativo":...