JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://github.highcharts.com/v3.0Beta/highcharts.js"></script>
<button class="hide" id="y0">hide yAxis0</button>
<button class="hide" id="y1">hide yAxis1</button>
<button class="hide" id="y2">hide yAxis2</button>
<button class="hide" id="x0">hide xAxis</button>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto; border: 1px solid green"></div>

JavaScript

$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                zoomType: 'xy'
            },
            credits: {
                enabled: false
            },
            xAxis: [{
                title: "Months",
                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,
                showEmpty: false
    
            }, { // Secondary yAxis
                gridLineWidth: 0,
                title: {
                    text: 'Rainfall',
                    style: {
                        color: '#4572A7'
                    }
                },
                labels: {
                    formatter: function() {
                        return this.value +' mm';
                    },
                    style: {
                        color: '#4572A7'
                    }
                },
                showEmpty: false
    
            }, { // Tertiary yAxis
                gridLineWidth: 0,
                title: {
                    text: 'Sea-Level Pressure',
                    style: {
                        color: '#AA4643'
                    }
                },
                labels: {
                    formatter: function() {
                        return this.value +' mb';
                    },
                    style: {
            ...