JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
	<head>
		<title>chalk-column | amCharts</title>
		<meta name="description" content="chart created using amCharts live editor" />
		
		<!-- amCharts javascript sources -->
		<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
		<script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script>
		<script type="text/javascript" src="https://www.amcharts.com/lib/3/themes/patterns.js"></script>
		

		<!-- amCharts javascript code -->
		<script type="text/javascript">
			AmCharts.makeChart("chartdiv",
				{
					"type": "serial",
					"categoryField": "category",
					"autoMarginOffset": 40,
					"marginRight": 70,
					"marginTop": 70,
					"startDuration": 1,
					"fontSize": 13,
					"theme": "patterns",
					"categoryAxis": {
						"gridPosition": "start",
						"title": "Buffer Size (bytes)"
					},
					"trendLines": [],
					"graphs": [
						{
							"balloonText": "[[title]] of [[category]]:[[value]]",
							"fillAlphas": 0.9,
							"gapPeriod": 11,
							"id": "AmGraph-1",
							"tabIndex": 2,
							"title": "graph 1",
							"type": "column",
							"valueField": "duration"
						},
						{
							"id": "AmGraph-4",
							"title": "graph 4",
							"valueField": "duration"
						}
					],
					"guides": [],
					"valueAxes": [
						{
							"id": "ValueAxis-1",
							"logarithmic": true,
							"title": "Duration (ms) (log)"
						}
					],
					"allLabels": [],
					"balloon": {},
					"titles": [],
					"dataProvider": [
{ "category":16,"duration":10461 },
{ "category":32,"duration":5245 },
{ "category":64,"duration":2696 },
{ "category":128,"duration":1403 },
{ "category":256,"duration":728 },
{ "category":512,"duration":400 },
{ "category":1024,"duration":223 },
{ "category":2048,"duration":131 },
{ "category":4096,"duration":71 },
{ "category":8192,"duration":50 },
{ "category":16384,"duration":28 },
{ "category":146988,"duration":27...