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>

<button id="setme">setSize (resize) Frequency by Tail Number</button>
<button id="setme2">setSize (resize) Group by Flight Hours</button>

<div id="content">
    <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>
</div>

JavaScript

$(function () {
    var chart;
    $(document).ready(function() {
        
        //first chart in result window
        $('button#setme').click(function() {
            alert("setting");
            $("#container_chartFreqAtaTailNum").highcharts().setSize(200, 400, false);
            alert("set");
        });
        
        // second chart in Result window
        $('button#setme2').click(function() {
            alert("setting");
            $("#container_chartGroupByFlightHours").highcharts().setSize(200, 200, false);
            alert("set");
        });
        
		var container_chartCorrectiveAction = new Highcharts.Chart({
		chart: {
				renderTo: 'container_chartCorrectiveAction',
						
						type: 'bar',
						height: 195
						
					},
					title: {
						text: 'Corrective Action'
					},
					subtitle: {
						text: 'Sub-ATA () / ATA (20)'
					},
					xAxis: {
						categories: ['No Defects Found-Fastener-Loose / Displaced'],
						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: false,
						borderWidth: 1,
						backgroundColor: '#FFFFFF',
						shadow: true,
						labelFormatter: function() {
							return '<div class="' + this.name + '-arrow"></div><span style="font-family: \'Advent Pro\',...