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="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
$('#container').highcharts({
chart: {
width: 850,
height: 400,
type: 'column',
spacingBottom: 100,
events: {
load: function () {
var label = this.renderer.text("36 Aircraft delivered to Air 1<UL><li>13 in 2013</li><li>23 in 2014</li></UL>52 Aircraft remaining on Air 2 certificate",100,100)
.css({
width: '180px'
})
.attr({
'stroke': 'silver',
'stroke-width': 1,
'r': 5,
'padding': 10
})
.add();
label.align(Highcharts.extend(label.getBBox(), {
align: 'left',
x: 0, // offset
verticalAlign: 'top',
y: 40 // offset
}), null, 'spacingBox');
}
},
marginLeft: 100
},
credits: {
enabled: false
},
exporting: {
enabled: true,
// sourceWidth: 1110,
// sourceHeight: 600,
scale: 1,
yAxis: {
tickInterval: 10
},
},
title: {
text: '<strong>B717 Aircraft Status</strong>',
userHTML: true,
align: 'center',
x: 90
},
xAxis: {
categories: ["Delivered to Air 1","Remaining on Air 2 Certificate"],
labels: {
rotation: 0,
style:...