JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 400px; height: 100px; margin: 0 auto"></div>
JavaScript
$(document).ready(function() {
chart11 = new Highcharts.Chart({
"chart": {
"renderTo": "container",
"type": "column",
"width": 600,
"height": 450,
"events": {
"load": function(event) {
try {
afterChartLoad(event);
} catch (error) {}
}
}
},
"xAxis": {
"categories": ["Category ONE", "Category TWO"],
"allowDecimals": false,
"title": {
"text": " ",
"align": "middle",
"style": {
"color": "steelblue"
}
},
"labels": {
"y": 12,
"style": {
"color": "steelblue"
}
}
},
"yAxis": {
"allowDecimals": false,
"labels": {
"overflow": "justify",
"style": {
"color": "steelblue"
}
},
"title": {
"text": "Teachers"
},
"max": 1
},
"tooltip": {
"formatter": function() {
return this.series.name + " - " + this.y + "";
}
},
"title": {
"text": "Increase in student divergent thinking",
"margin": 100,
"style": {
"color": "steelblue"
}
},
"plotOptions": {
"column": {
"groupPadding": 0.1,
"borderWidth": null,
"dataLabels": {
"enabled": null,
"color": null,
"style": {
"fontSize": null,
"font-weight": "bold"
},
"formatter": function() {
...