JSFiddle - React, Tailwind, and code Playground
by NesterOne
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 100%; margin: 0 auto"></div>
JavaScript
$(function () {
$('#container').highcharts({
"chart": {
"renderTo": "chartContainer",
"zoomType": "xy",
"type": ""
},
"credits": {
"enabled": false
},
"title": {
"text": null
},
"tooltip": {
"valueDecimals": 2,
"shared": true
},
"xAxis": {
"categories": [{
"name": "Deluxe Supermarket",
"categories": ["Canada", "Mexico", "USA"]
}, {
"name": "Gourmet Supermarket",
"categories": ["Mexico", "USA"]
}, {
"name": "Mid-Size Grocery",
"categories": ["Canada", "Mexico", "USA"]
}, {
"name": "Supermarket",
"categories": ["Mexico", "USA"]
}],
"labels": {
"step": 1,
"maxStaggerLines": 1
},
"title": {
"text": ""
}
},
"yAxis": [{
"title": {
"text": "Store Sales 2013",
"style": {
"color": "#0d233a"
}
},
"labels": {
"rotation": 0,
"step": 1,
"style": {
"color": "#0d233a"
}
},
"opposite": false
}, {
"title": {
"text": "Store Cost 2013",
"style": {
"color": "#2f7ed8"
}
},
"labels": {
"rotation": 0,
"step": 1,
"style": {
"color": "#2f7ed8"
}
},
"opposite": true
}, {
"title": {
"text": "Store Sales 2013 / SQFT",
"style": {
"color":...