JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container_chartFreqAtaTailNum" style="width: 700px;"></div>
JavaScript
$(function () {
var chart;
$(document).ready(function() {
var container_chartFreqAtaTailNum = new Highcharts.Chart({
chart: {
events: {
load: function () {
var label = this.renderer.label("How do I move this center and under the legend.")
.css({
width: '180px'
})
.attr({
'stroke': 'silver',
'stroke-width': 1,
'r': 5,
'padding': 10
})
.add();
label.align(Highcharts.extend(label.getBBox(), {
align: 'right',
x: 0, // offset
verticalAlign: 'bottom',
y: 0 // offset
}), null, 'spacingBox');
}
},
renderTo: 'container_chartFreqAtaTailNum',
type: 'bar',
height: 895
},
title: {
text: 'Frequency by Tail Number'
},
subtitle: {
text: 'Fact ATA (25)'
},
xAxis: {
categories: ['235','245','402','411','432','442','493','703','714','720','730','745','756','767','772','792'],
title: {
text: 'Tail Number'
},
labels: {
style: {
width: '12000px'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Count',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
formatter: function() {
return ''+ this.series.name +': '+ this.y +' Count';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
formatter: function () {
if(this.y < 1)
return "<1";
else
...