JSFiddle - React, Tailwind, and code Playground

by Gonzalo

HTML

<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
		<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: 'Average Monthly Weather Data for Tokyo'
						},
						subtitle: {
							text: 'Source: WorldClimate.com'
						},
						xAxis: [{
							categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
								'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
						}],
						yAxis: [{ // Primary yAxis
							labels: {
								formatter: function() {
									return this.value +'°C';
								},
								style: {
									color: '#89A54E'
								}
							},
							title: {
								text: 'Temperature',
								style: {
									color: '#89A54E'
								}
							},
							opposite: true
				
						}, { // Secondary yAxis
							gridLineWidth: 0,
							title: {
								text: 'Rainfall',
								style: {
									color: '#4572A7'
								}
							},
							labels: {
								formatter: function() {
									return this.value +' mm';
								},
								style: {
									color: '#4572A7'
								}
							}
				
						}, { // Tertiary yAxis
							gridLineWidth: 0,
							title: {
								text: 'Sea-Level Pressure',
								style: {
									color: '#AA4643'
								}
							},
							labels: {
								formatter: function() {
									return this.value +' mb';
								},
								style: {
									color: '#AA4643'
								}
							},
							opposite: true
						}],
						tooltip: {
							formatter: function() {
								var unit = {
									'Rainfall': 'mm',
									'Temperature': '°C',
									'Sea-Level Pressure': 'mb'
								}[this.series.name];
				
								return ''+
									this.x +': '+ this.y +' '+ unit;
							}
						},
						legend: {
							enabled:false,
							layout: 'vertical',
							align: 'left',
							x: 120,
							verticalAlign: 'top',
							y: 80,
							floating: true,
							backgroundColor: '#FFFFFF'
						},
						
						plotOptions: {
							column:...