JSFiddle - React, Tailwind, and code Playground

by tholz

HTML

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/gantt.js"></script>
<div id="chartdiv"  style="width: 100%; height: 400px; background-color: #FFFFFF;"></div>

JavaScript

var chart = AmCharts.makeChart( "chartdiv", {
"type": "gantt",
    "theme": "light",
	"marginRight": 70,
	"period": "hh",
    "dataDateFormat":"YYYY-MM-DD",
    "path": "http://www.amcharts.com/lib/3/",
	"balloonDateFormat": "JJ:NN",
	"columnWidth": 0.5,
	"valueAxis": {
		"type": "date",
		"minimum": 7,
		"maximum": 31
	},
	"brightnessStep": 10,
	"graph": {
		"fillAlphas": 1,
		"balloonText": "<b>[[task]]</b>: [[open]] [[value]]"
	},
	"rotate": true,
	"categoryField": "category",
	"segmentsField": "segments",
	"colorField": "color",
	"startDate": "2015-01-01",
	"startField": "start",
	"endField": "end",
	"durationField": "duration",
	"dataProvider": [ {
		"category": "John",
        "property": 122,
		"segments": [ {
			"start": 7,
			"duration": 2,
			"color": "#7B742C",
			"task": "Task #1"
		}, {
			"duration": 2,
			"color": "#7E585F",
			"task": "Task #2"
		}, {
			"duration": 2,
			"color": "#CF794A",
			"task": "Task #3"
		} ]
	}, {
		"category": "Smith",
        "property": 122,
		"segments": [ {
			"start": 10,
			"duration": 2,
			"color": "#7E585F",
			"task": "Task #2"
		}, {
			"duration": 1,
			"color": "#CF794A",
			"task": "Task #3"
		}, {
			"duration": 4,
			"color": "#7B742C",
			"task": "Task #1"
		} ]
	}, {
		"category": "Ben",
        "property": 122,
		"segments": [ {
			"start": 12,
			"duration": 2,
			"color": "#7E585F",
			"task": "Task #2"
		}, {
			"start": 16,
			"duration": 2,
			"color": "#FFE4C4",
			"task": "Task #4"
		} ]
	}, {
		"category": "Mike",
        "property": 122,
		"segments": [ {
			"start": 9,
			"duration": 6,
			"color": "#7B742C",
			"task": "Task #1"
		}, {
			"duration": 4,
			"color": "#7E585F",
			"task": "Task #2"
		} ]
	}, {
		"category": "Lenny",
        "property": 122,
		"segments": [ {
			"start": 8,
			"duration": 1,
			"color": "#CF794A",
			"task": "Task #3"
		}, {
			"duration": 4,
			"color": "#7B742C",
			"task": "Task #1"
		} ]
	}, {
		"category": "Scott",
        "property": 122,
		"segments": [...