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() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                zoomType: 'xy'
				},
				title: {
					text: 'ATA - Flight Delays'
				},
				subtitle: {
					text: 'whatever'
				},
				xAxis: [{
					categories: ['A-Check','C-Check','MAINT','PIREP']

				}],
				yAxis: [
					{ 
						labels: {
						formatter: function() {
							return this.value +' Mins';
						}
						style: { color: '#89A54E' }
						},
						title: {
							text: 'Minutes',
							style: {
								color: '#89A54E'
							}
						}
					}, 
					{ 
						title: {
							text: 'Delays',
							style: { color: '#4572A7'}
						},
						labels: {
							formatter: function() {
								return this.value +' Delays';
							},
							style: {color: '#4572A7'}
						},
						opposite: true
					}
				],
				tooltip: {
					formatter: function() {
						return ''+ this.x +': '+ this.y + (this.series.name == 'Del' ? ' Mins' : ' Delays');
					}
				},
				legend: {
					layout: 'vertical',
					align: 'left',
					x: 120,
					verticalAlign: 'top',
					y: 100,
					floating: true,
					backgroundColor: '#FFFFFF'
				},
				series: [{
						name: 'Delays',
						color: '#4572A7',
						type: 'column',
						yAxis: 1,
						data: [null,null,223,168]
					},{
						name: 'Minutes',
						color: '#89A54E',
						type: 'spline',
						data: [null,null,3,4]
					}]
			});
    }];
    
});