JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="aU8Q_4" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<div id="aU8Q_5" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
var chart1, chart2;
$(document).ready(function () {
var opts = {
chart: {
"alignTicks": true,
"animation": true,
"backgroundColor": "#FFFFFF",
"borderColor": "#4572A7",
"borderRadius": 5,
"borderWidth": 0,
"ignoreHiddenSeries": true,
"inverted": false,
"plotBorderColor": "#C0C0C0",
"plotBorderWidth": 0,
"plotShadow": false,
"reflow": true,
"resetZoomButton": {
"position": {
"verticalAlign": "bottom",
"y": 30.0
},
"relativeTo": "plot"
},
"selectionMarkerFill": "rgba(69,114,167,0.25)",
"shadow": false,
"showAxes": false,
"spacingBottom": 15,
"spacingLeft": 10,
"spacingRight": 10,
"spacingTop": 10,
"type": "column",
"zoomType": "x"
},
credits: {
"enabled": false
},
legend: {
"align": "center",
"borderColor": "#909090",
"borderRadius": 5,
"borderWidth": 1,
"enabled": true,
"floating": false,
"itemMarginBottom": 0,
"itemMarginTop": 0,
"layout": "horizontal",
"lineHeight": 16,
"margin": 15,
"padding": 8,
"reversed": false,
"rtl": false,
"shadow": false,
"symbolPadding": 5,
"symbolWidth": 30,
"useHtml": false,
"verticalAlign": "bottom",
"x": 0,
"y": 0
},
plotOptions: {
"column": {
"allowPointSelect": false,
"animation": true,
"colorByPoint": false,
"enableMouseTracking": true,
"grouping": true,
"selected": false,
"shadow": true,
"showCheckbox": false,
"showInLegend": true,
"stacking":...