JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
$('#container').highcharts({
"chart": {
"height": 271,
"width": 1182
},
"legend": {
"enabled": true
},
navigator: {
enabled: true
},
"scrollbar": {
"enabled": true
},
"xAxis": {
"lineWidth": 1,
"lineColor": "#000000",
"categories": ["56324.0", "56453.0", "56636.0", "56665.0", "56775.0", "56848.0", "56887.0", "56888.0", "56908.0", "56953.0", "56955.0", "57016.0", "57058.0", "57059.0", "57066.0", "57082.0", "57087.0", "57093.0", "57098.0", "57104.0", "57106.0", "57108.0", "57110.0", "57222.0", "57231.0", "57232.0", "57244.0", "57390.0", "57401.0", "57406.0", "57412.0", "57419.0", "57424.0", "57428.0", "57433.0", "57434.0", "57435.0", "57436.0", "57437.0", "57441.0"],
"tickmarkPlacement": "on",
"gridLineWidth": 0,
"gridLineColor": "#C0C0C0",
"max": 11
},
"series": [{
"eQFormat": "#,###,###,##0.00",
"type": "column",
"yAxis": 0,
"data": [{
"y": 56324
}, {
"y": 56453
}, {
"y": 56636
}, {
"y": 56665
}, {
"y": 56775
}, {
"y": 56848
}, {
"y": 56887
}, {
"y": 56888
}, {
"y": 56908
}, {
"y": 56953
}, {
"y": 56955
}, {
"y": 57016
}, {
"y": 57058
}, {
"y": 57059
}, {
...