JSFiddle - React, Tailwind, and code Playground

by no1uknow

HTML

<div id="container_chartFreqAtaTailNum" style="height: 300px"></div>
<div id="container_chartGroupByFlightHours" style="height: 300px"></div>

JavaScript

var chart; var chart1;
$(document).ready(function() {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container_chartFreqAtaTailNum',
            type: 'bar',
            height: 608
        },
        title: {
            text: 'Frequency by Tail Number'
        },
        xAxis: {
            categories: [270,322,348,369,377,4,429,451,494,529,536,550],
            title: {
                text: 'Tail Number'
            }
        },
        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: 12, */
                pointPadding: 0,
                groupPadding: 0,
                borderWidth: 1, 
                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\', sans-serif; font-size:12px">' + this.name +'</span><br/><span style="font-size:10px; color:#ababaa">   Total: ' + this.options.total + '</span>';
            }
        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'A-Check',
            total: '1',
            data: [null,null,null,null,1,null,null,null,null,null,null,null]
        },{
         ...