JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="RMSI_Chart_650422" style="height: 400px; min-width: 310px"></div>
JavaScript
$(function () {
Highcharts.setOptions({
"colors": ["#626A71", "#D26F28", "#F6A84F", "#1B5EA3", "#34A8E0"],
"title": {
"style": {
"color": "#BFBFBF"
}
},
"subtitle": {
"style": {
"color": "#BFBFBF"
}
},
"chart": {
"backgroundColor": null
},
"legend": {
"backgroundColor": null,
"itemStyle": {
"color": "#BFBFBF",
"font": "9pt Trebuchet MS, Verdana, sans-serif"
},
"itemHoverStyle": {
"color": "grey"
}
},
"xAxis": {
"labels": {
"style": {
"color": "#BFBFBF"
}
},
"gridLineWidth": 0,
"lineWidth": 0,
"minorGridLineWidth": 0,
"lineColor": "transparent",
"minorTickLength": 0,
"tickLength": 0
},
"yAxis": {
"labels": {
"enabled": false
},
"gridLineWidth": 0,
"lineWidth": 0,
"minorGridLineWidth": 0,
"lineColor": "transparent",
"minorTickLength": 0,
"tickLength": 0
},
"tooltip": {
"followpointer": true
},
"credits": {
"enabled": false
},
"plotOptions": {
"series": {
"borderWidth": 0
},
"bar": {
"minPointLength": 5,
"dataLabels": {
"allowOverlap": true,
"overflow": "none",
"crop": false,
"align": "left",
"enabled": true,
"color": "#BFBFBF",
"style": {
"fontSize": 9
}
}
...