JSFiddle - React, Tailwind, and code Playground
by amcharts
HTML
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="width: 30%; height: 200px;"></div>
JavaScript
var chart = AmCharts.makeChart("chartdiv", {
"dataDateFormat": "YYYY-MM-DD JJ:NN:SS",
"thousandsSeparator": ",",
"decimalSeparator": ".",
"fontFamily": "Verdana",
"fontSize": 10,
"type": "serial",
"autoMargins": false,
"marginBottom": 28,
"marginLeft": 0,
"marginRight": 0,
"marginTop": 15,
"usePrefixes": true,
"precision": 2,
"balloon": {
"borderAlpha": 0,
"color": "#FFFFFF",
"cornerRadius": 8,
"fadeOutDuration": 0,
"fillColor": "#000000",
"maxWidth": 300,
"shadowAlpha": 0
},
"categoryAxis": {
"axisAlpha": 0,
"gridAlpha": 0,
"minHorizontalGap": 25,
"position": "left",
"dateFormats": [{
"period": "hh",
"format": "HH"
}, {
"period": "DD",
"format": "DD"
}, {
"period": "WW",
"format": "D MMM"
}, {
"period": "MM",
"format": "MMM"
}, {
"period": "YYYY",
"format": "YYYY"
}],
"parseDates": false
},
"chartCursor": {
"categoryBalloonColor": "#000000",
"categoryBalloonDateFormat": "D MMM YYYY",
"cursorAlpha": 0.1,
"cursorColor": "#000000",
"fullWidth": true,
"oneBalloonOnly": true,
"valueLineBalloonEnabled": false,
"valueLineEnabled": false,
"zoomable": false
},
"legend": {
"align": "center",
"autoMargins": false,
"equalWidths": false,
"marginBottom": 0,
"marginLeft": 0,
"marginRight": 0,
"markerSize": 10,
"spacing": 0,
"valueWidth": 0,
"verticalGap": 2
},
"valueAxes": [{
...