Highchart toggle multi y-axis

by Kieran Dang

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://getbootstrap.com/dist/css/bootstrap.css">
<script src="https://getbootstrap.com/dist/js/bootstrap.js"></script>
<div class="container">
    <div class="dropdown" id="metric-1">
        <button class="btn btn-default" data-toggle="dropdown"> <span id="metric-title-1">Access</span>
 <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li id="access-1" style="display: none;"><a tabindex="-1" href="#">Access</a> 
            </li>
            <li id="hits-1"><a tabindex="-1" href="#">Hits</a> 
            </li>
            <li id="duration-1"><a tabindex="-1" href="#">Duration</a> 
            </li>
            <li id="session-1"><a tabindex="-1" href="#">Session</a> 
            </li>
        </ul>
    </div> vs
    
    <div class="dropdown" id="metric-2">
        <button class="btn btn-default" data-toggle="dropdown"> <span id="metric-title-2">None</span>
 <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li id="none-2" style="display: none;"><a tabindex="-1" href="#">None</a> 
            </li>
            <li id="access-2" style="display: none;"><a tabindex="-1" href="#">Access</a> 
            </li>
            <li id="hits-2"><a tabindex="-1" href="#">Hits</a> 
            </li>
            <li id="duration-2"><a tabindex="-1" href="#">Duration</a> 
            </li>
            <li id="session-2"><a tabindex="-1" href="#">Session</a> 
            </li>
        </ul>
    </div>
</div>
</div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
       var yAxes = [{ // Primary yAxis
            title: {
                text: 'Lượt',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            labels: {
                format: '{value}',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
        }, { // Tertiary yAxis
            gridLineWidth: 0,
            title: {
                text: 'Giờ (h)',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            labels: {
                format: '{value}',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
        }, { // Tertiary yAxis
            gridLineWidth: 0,
            title: {
                text: 'Session(s)',
                style: {
                    color: Highcharts.getOptions().colors[2]
                }
            },
            labels: {
                format: '{value}',
                style: {
                    color: Highcharts.getOptions().colors[2]
                }
            },
        }];
    
    var series = [{
            name: 'Access',
            type: 'spline',
            data: [88, 205, 81, 49, 46, 49],
            tooltip: {
                valueSuffix: ' lượt'
            }
        }, {
            name: 'Hits',
            type: 'spline',
            data: [29, 43, 29, 21, 25, 27],
            tooltip: {
                valueSuffix: ' lượt'
            }
        }, {
            name: 'Duration',
            type: 'spline',
            data: [1.16, 1.95, 1.38, 1.40, 1.19, 1.29],
            tooltip: {
                valueSuffix: ' h'
            }
        }, {
            name: 'Session',
            type: 'spline',
            data: [388, 320, 381, 349, 346, 349],
        }];
    
    $('#container').highcharts({
       ...