JSFiddle - React, Tailwind, and code Playground

by Ramkumar Pillai

HTML

<script type="text/javascript" src="https://raw.github.com/highslide-software/highcharts.com/master/js/highcharts.src.js"></script>

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

JavaScript

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'
            }
         },
          lineWidth: 1,
         opposite: true,
          showEmpty: false
         
      }, { // Secondary yAxis
         gridLineWidth: 0,
         title: {
            text: 'Rainfall',
            style: {
               color: '#4572A7'
            }
         },
         labels: {
            formatter: function() {
               return this.value +' mm';
            },
            style: {
               color: '#4572A7'
            }
         },
          lineWidth: 1,
          showEmpty: false
         
      }, { // Tertiary yAxis
         gridLineWidth: 0,
         title: {
            text: 'Sea-Level Pressure',
            style: {
               color: '#AA4643'
            }
         },
         labels: {
            formatter: function() {
               return this.value +' mb';
            },
            style: {
               color: '#AA4643'
            }
         },
         opposite: true,
          lineWidth: 1,
          showEmpty: false
      }],
      tooltip: {
         formatter: function() {
            var unit = {
               'Rainfall': 'mm',
               'Temperature': '°C',
               'Sea-Level Pressure': 'mb'
           ...