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" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    var chart;
    $(document).ready(function() {
            container_chartGroupByFlightHours = new Highcharts.Chart({
		chart: {
            reflow: false,
		renderTo: 'container',
					
						type: 'bar',
            height: 540,
            
						
					},
					title: {
						text: 'Group by Flight Hours'
					},
					subtitle: {
						text: 'ATA (32)'
					},
					xAxis: {
						categories: ['1','2','3'],
						title: {
							text: 'Group'
						}
						},
						yAxis: {
						min: 0,
						title: {
							text: 'Average',
							align: 'high'
						},
						labels: {
							overflow: 'justify'
						}
					},
					tooltip: {
						formatter: function() {
						return ''+
						this.series.name +': '+ this.y +' Average';
						}
					},
					plotOptions: {
						bar: {
							dataLabels: {
								enabled: true
							}
						},
						series: {
				
		
                            pointWidth:20,
                            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\', sans-serif; font-size:12px">' + this.name +'</span><br/><span style="font-size:10px; color:#ababaa">   Total: ' + this.options.total + '</span>';
						}
					},
					credits: {
						enabled: false
					},
					exporting: { 
						enabled: false 
					},
					series: [{
                    
                    name: 'A-Check',
                    total: '2.25',
                    data: [1.00,null,1.25]
                    },{
                 
                    name: 'C-Check',
                    total: '55',
                    data: [21.50,19.00,14.50]
                    },{
             
                   ...