JSFiddle - React, Tailwind, and code Playground

by no1uknow

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("Top 3")
                .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
							}
						},
						series: {
							pointWidth:10,
                            groupPadding: .05,
							shadow: true
						}
					},
					legend: {
                        layout:...