JSFiddle - React, Tailwind, and code Playground

by no1uknow

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container_chartFreqAtaTailNum" style="width: 700px;"></div>
<div id="container_chartGroupByFlightHours" style="width: 700px;"></div>
<div id="container_chartGroupByHub" style="width: 700px;"></div>
<div id="container_chartGroupByConfiguration" style="width: 700px;"></div>
<div id="container_chartAtaFleetAvg" style="width: 700px;"></div>
<div id="container_chartAtaFreqBySubAta" style="width: 700px;"></div>
<div id="container_chartAtaLocation" style="width: 700px;"></div>
<div id="container_chartAtaDelayCode" style="width: 700px;"></div>
<div id="container_chartFreqSubAtaTailNum" style="width: 700px;"></div>
<div id="container_chartGroupSubAtaByFlightHours" style="width: 700px;"></div>
<div id="container_chartGroupSubAtaByHub" style="width: 700px;"></div>
<div id="container_chartGroupSubAtaByConfiguration" style="width: 700px;"></div>
<div id="container_chartSubAtaFleetAvg" style="width: 700px;"></div>
<div id="container_chartSubAtaLocation" style="width: 700px;"></div>
<div id="container_chartCorrectiveAction" style="width: 1400px;"></div>
<div id="container_chartSeason" style="width: 700px;"></div>
<div id="container_chartSeasonByMonth" style="width: 700px;"></div>
<div id="container_chartSubAtaDelayCode" style="width: 700px;"></div>
<div id="container_chartSubAtaFlightDelay" style="width: 700px;"></div>
<div id="container_chartAtaFlightDelay" style="width: 700px;"></div>

JavaScript

$(function () {
    var chart; 
    $(document).ready(function() {
		var container_chartCorrectiveAction = new Highcharts.Chart({
		chart: {
				renderTo: 'container_chartCorrectiveAction',
						
						type: 'bar',
						height: 835
						
					},
					title: {
						text: 'Corrective Action'
					},
					subtitle: {
						text: 'Fact Sub-ATA (20) / Fact ATA (25)'
					},
					xAxis: {
						categories: ['Remove and Replace-Window Shade-Missing Items/Hardware','Remove and Replace-Window Shade-Cracked / Torn','Remove and Replace-PSU-Inoperative','Remove and Replace-Insulation Blankets-Loose / Displaced','Remove and Replace-Insulation Blankets-Delaminated','Repair-Window Shade-Dirty / Debris','Repair-Ceiling Panel (Pax)-Damage','Repair-Sidewall Panel (Pax)-Missing Items/Hardware','Repair-Sidewall Panel (Pax)-Loose / Displaced','Repair-Sidewall Panel (Pax)-Damage','Repair-Sidewall Panel (Pax)-Cracked / Torn','Repair-PSU-Puncture / Hole','Repair-Floor Covering-Missing Items/Hardware','Repair-Seat Pocket-Cracked / Torn','Repair-Insulation Blankets-Damage','Repair-Insulation Blankets-Delaminated','No Defects Found-Floor Covering-Dirty / Debris'],
						title: {
							text: 'Action'
						},
						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: 'horizontal',
						align: 'center',
						verticalAlign: 'bottom',
						floating:...