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: {
events: {
load: function () {
var text = this.renderer.text("Malformed data").attr({
'text-anchor': "middle",
stroke: "black",
opacity: 0,
x: this.plotWidth / 2 + this.plotLeft
}).add(),
bbox = text.getBBox();
text.attr({
y: this.plotHeight / 2 - bbox.height / 2 // y-position - half of the text height
}).animate({
opacity: 1
});
}
}
}
});
});