HighCharts. Adding series to yAxis with id

Question

im having some problems adding series to yAxis with different ID in highcharts.

I have made an example:

$(function () {

        $('#graf').highcharts({
            chart: {
                zoomType: 'xy'
            },
            title: {
                text: ''
            },
            subtitle: {
                text: ''
            },
            xAxis: [{type: 'datetime',
                    title: {
                        text: 'Date'
                    }}],
            yAxis: [],
                    series : []
                    ,
            tooltip: {
                shared: true
            },
            legend: {
                enabled: true,
                align: 'left',
                backgroundColor: '#FFFFFF',
                borderColor: 'grey',
                borderWidth: 1,
                layout: 'vertical',
                verticalAlign: 'top',
                y: 0,
                shadow: true
            }
        });


var chart = $('#graf').highcharts();
$('#add').click(function () {
    chart.addAxis({ // Secondary yAxis
        id: "asd",
        title: {
            text: 'Rainfall'
        },
        lineWidth: 2,
        lineColor: '#08F',
        opposite: true
    });     
    chart.addAxis({ // Secondary yAxis
        id: "abc",
        title: {
            text: 'Rainfall'
        },
        lineWidth: 2,
        lineColor: '#08F',
        opposite: true
    });     
    chart.addSeries({
        name: 'Rainfall',
        type: 'column',
        color: '#08F',
        yAxis: "asd",
        data: [ [Date.UTC(1970,  9, 27), 0   ],
            [Date.UTC(1970, 10, 10), 0.6 ],
            [Date.UTC(1970, 10, 18), 0.7 ],
            [Date.UTC(1970, 11,  2), 0.8 ],
            [Date.UTC(1970, 11,  9), 0.6 ]]
    });
    $(this).attr('disabled', true);
    $('#remove').attr('disabled', false);
});
});

JSFIDDLE: http://jsfiddle.net/5f6b6mu9/

I have yAxis with id "asd" and "abc". When trying to add a series to the "asd" yAxis it doesnt work. Uncaught TypeError: Cannot read property 'length' of undefined.

Here is a cap of whats going on in my webpage: http://i61.tinypic.com/8yx7cw.jpg

If i change both yaxis id to the same id, it work, but thats not the point.

Any suggestions? Thanks

Answer 1

thats pretty simple.

add the series corresponding to the yAxis immediately after you add the series.

chart.addAxis({ // Secondary yAxis
            id: "asd",
            title: {
                text: 'Rainfall'
            },
            lineWidth: 2,
            lineColor: '#08F',
            opposite: true
        },false);
        chart.addSeries({
            name: 'Rainfall',
            type: 'column',
            color: '#08F',
            yAxis: "asd",
            data: [ [Date.UTC(1970,  9, 27), 0   ],
                [Date.UTC(1970, 10, 10), 0.6 ],
                [Date.UTC(1970, 10, 18), 0.7 ],
                [Date.UTC(1970, 11,  2), 0.8 ],
                [Date.UTC(1970, 11,  9), 0.6 ]]
        });

        chart.addAxis({ // Secondary yAxis
            id: "abc",
            title: {
                text: 'Rainfall'
            },
            lineWidth: 2,
            lineColor: '#08F',
            opposite: true
        },false); 

Here i've updated your fiddle