JSFiddle - React, Tailwind, and code Playground
by sbochan
HTML
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
JavaScript
$(function () {
$('#container').highcharts('StockChart', {
"chart": {
"height": 400,
"type": "column",
"marginLeft": 100,
"spacing": [30, 60, 0, 0]
},
"title": {
"text": "Business & Economic Climate",
"x": -20
},
"subtitle": {
"text": false,
"x": -20
},
"plotOptions": {
"series": {
"animation": false
},
"line": {
"marker": {
"enabled": true
},
"events": {
}
}
},
"credits": {
"enabled": true
},
"xAxis": {
"type": "datetime",
"dateTimeLabelFormats": {
"millisecond": "%d-%m-%Y",
"second": "%d-%m-%Y",
"minute": "%d-%m-%Y",
"hour": "%d-%m-%Y",
"day": "%d-%m-%Y",
"week": "%d-%m-%Y",
"month": "%d-%m-%Y",
"year": "%d-%m-%Y"
},
"labels": {
"crop": false,
"overflow": false,
"style": {
"fontSize": "12px"
}
},
"dateTimeLabelFormats": {
"week": "%b '%y"
},
"startOnTick": true,
"endOnTick": true,
"tickInterval": 5256000000,
"minRange": 2678400000,
"gridLineWidth": 1,
"plotLines": [
],
"plotBands": [
]
},
"yAxis": {
"labels": {
},
"opposite": false,
"title": {
"text": ""
},
...