JSFiddle - React, Tailwind, and code Playground

by Jean Carlos Galhardi

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;
var chart = AmCharts.makeChart( "chartdiv", {
	"type": "gantt",
    "theme": "dark",
	"marginRight": 70,
	"period": "bb",
    "dataDateFormat":"DD-MM-YYYY",
	"balloonDateFormat": "JJ:NN",
	"columnWidth": 0.5,
	"valueAxis": {
		"type": "month",
		"minimum": 1,
		"maximum": 30
	},
	"brightnessStep": 10,
	"graph": {
		"fillAlphas": 1,
		"balloonText": "<b>[[Descricao]]</b>: [[open]] [[value]]"
	},
	"rotate": true,
	"categoryField": "milestone",
	"segmentsField": "atividade",
	"colorField": "color",
	"startDate": "01-10-2015",
	"startField": "InicioCedo",
	"endField": "TerminoCedo",
	"durationField": "TempoRevisado",
	"dataProvider": [ {
		"milestone": "Infraestrutura",
		"atividade": [ {
			"InicioCedo": 1,
			"TempoRevisado": 2,
			"color": "#7B742C",
			"Descricao": "Instalar Banco de Dados"
		}, {
			"InicioCedo": 3,
			"TempoRevisado": 2,
			"color": "#7E585F",
			"Descricao": "Instalar Visual Studio"
		}]
	} ],
	"chartScrollbar": {},
	"chartCursor": {
		"valueBalloonsEnabled": false,
		"cursorAlpha": 0.1,
		"valueLineBalloonEnabled": true,
		"valueLineEnabled": true,
		"fullWidth": true
	},
    "export": {
    	"enabled": true
     }
} );