Как сделать несколько осей Y с входящими рядами данных из базы данных, используя Highcharts

На самом деле дело в том, что мне нужен график, в котором будет отображаться серия данных, но не с одной осью y. Но с множественной осью y, скажем, у меня есть 8 рядов данных, которые будут показаны в одной диаграмме с одиночным ось y.Что я хочу, чтобы она была выборочной, то есть пользователь будет нажимать на поток вкл/выкл, чтобы сделать его видимым или отключить, в то же время ось каждой серии данных также станет видимой. Вот ссылка нужного графика (график, который я хочу на самом деле).

'






<!-- Styles -->
<style>
#chartdiv {
    width   : 140%;
    height  : 800px;
}
.highcharts-credits {

    display: none !important;
}

</style>

<!-- Resources -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="http://highcharts.github.io/export-csv/export-csv.js"></script>

<div id="container" style="min-width: 200px; height: 400px; margin: 0 auto"></div>


<!-- Chart code --> <script>

        $(function () {
               var lastPart = window.location.pathname.split("/").pop();
                $.getJSON('/demo/Devices/chGraph/'+lastPart, function(data) {
                    // Populate series
                    Xdata = [];
                    Ydata = [];

                    Xdata =  data[0].CHGRAPHUpdatetime.time.split(",");


                    for(i = 0; i< data[0].channelGraph.length; i++) {
                       Ydata[i] = {"name": "", "data":[]};
                        Ydata[i].name = data[0].channelGraph[i].chkey;

                        var listnumber = data[0].channelGraph[i].list.split(',').map(function(item) {
                    return parseInt(item, 10);

                });
                    Ydata[i].data = listnumber




                    }
                       console.log(Ydata);


                var chart = new Highcharts.Chart({
                    chart: {
                          renderTo: container,
                          zoomType: 'xy',
                          panning: true,
                          panKey: 'shift',
                          height:600,
                          width:1000,
                          borderColor: '#EBBA95',
                          borderWidth: 4,
                          spacingTop: 30,
                          spacingBottom: 50,
                          spacingLeft: 100,
                          spacingRight:80
                    },
                    title: {

                            text: 'Monthly Average Temperature'
                           },


                    xAxis: {
                            type: 'varchar',
                            categories: Xdata
                            }, 


                    tooltip: {
                            shared: true,
                            useHTML: true,
                            headerFormat: '<small>{point.key}</small><table>',
                            pointFormat: '<tr><td style="color: {series.color}">{series.name}: </td>' +
                            '<td style="text-align: right"><b>{point.y} </b></td></tr>',
                            footerFormat: '</table>',
                            valueDecimals: 2
                            },


                    series:Ydata,


                },


        }) //end ajax call

        }) // end javascfrpt
        $('#getcsv').click(function () {
    alert(chart.getCSV());
          });   



</script>

<!-- HTML -->
<div id="chartdiv" >

</div>

как добавить несколько y-оси в соответствии с данными каждой серии.

мы получаем данные из кода json и выше, показывает только одну ось y.

Я прикрепил изображение графика. Это фактический график.

Следующее - это требуемое изображение графика. Это необходимый граф.