Toggle highchart axis

by Kieran Dang

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
Toogle:
<button id="left">Left</button>
<button id="right">Right</button>
<button id="both">Both</button>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    var yAxis = [{ // Primary yAxis
            labels: {
                format: '{value}°C',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            title: {
                text: 'Temperature',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            }
        }, { // Secondary yAxis
            title: {
                text: 'Rainfall',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            labels: {
                format: '{value} mm',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            opposite: true
        }];
    
    var series = [{
            name: 'Temperature',
            type: 'spline',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
            tooltip: {
                valueSuffix: '°C'
            }
        },{
            name: 'Rainfall',
            type: 'spline',
            yAxis: 1,
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            tooltip: {
                valueSuffix: ' mm'
            }

        }];

    $('#left').click(function (e) {
        var chart = $("#container").highcharts();
        var options = chart.options;
        options.series = [ series[0] ];
        options.series[0].yAxis = 0;
        options.yAxis = [ yAxis[0] ];
        
        chart = $('#container').highcharts(options);
    });

    $('#right').click(function (e) {
        var chart = $("#container").highcharts();
        var options = chart.options;
        options.series = [ series[1] ];
        options.series[0].yAxis = 0;            
        options.yAxis = [ yAxis[1] ];
        options.yAxis[0].opposite = false;
        
        chart =...