Highchart data series on wrong y-axis

Question

I am struggling to solve this issue where I have a Highcharts graph with temperature and humidity. It has two y-axis, one for temperature and one for humidity. I have specified that humidity should go to the y-axis id 1, but it does not. It puts the line in, but it is 'plotted' to the temperature axis values.

See this jsfiddle

    $(function () {
    $('#container').highcharts({
        chart: {
            zoomType: 'x',
            type: 'spline'
        },
        title: {
            text: 'Temperatures - Vdrivhus'
        },
        subtitle: {
            text: 'last hour'
        },
        xAxis: {
            type: 'datetime',
            // dateTimeLabelFormats.setOption("minute", "%H:%M");
            dateTimeLabelFormats: { // don't display the dummy year
                day: '%e %b',
                week: '%e %b %y',
                month: '%b %y',
                year: '%Y'
            }
        },
        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value}°C',
                style: {
                    color: '#89A54E'
                }
            },
            title: {
                text: 'Temperature',
                style: {
                    color: '#89A54E'
                }
            }
        }, { // Secondary yAxis
            title: {
                text: 'Humidity',
                style: {
                    color: '#4572A7'
                }
            },
            labels: {
                format: '{value} %',
                style: {
                    color: '#4572A7'
                }
            },
            min: 50,
            max: 100,
            opposite: true
        }],
        tooltip: {
            shared: true
        },

        series: [{
            name: 'Temperature',
            // Define the data points.
            marker: {
                enabled: false
            },
            yaxis: 0,
            tooltip: {
                valueSuffix: '°C'
            },
            data: [
                [1387521917000, 5],
                [1387522299000, 5.2],
                [1387522531000, 5.1],
                [1387522809000, 5.1],
                [1387523536000, 4.8],
                [1387523745000, 4.7],
                [1387524008000, 4.7],
                [1387524303000, 4.8],
                [1387524667000, 4.9],
                [1387524904000, 4.9],
                [1387525245000, 5]
            ]
        }, {
            name: 'Humidity',
            marker: {
                enabled: false
            },
            yaxis: 1,
            tooltip: {
                valueSuffix: '%'
            },
            data: [
                [1387521917000, 74.4],
                [1387522299000, 73.6],
                [1387522531000, 74],
                [1387522809000, 74],
                [1387523536000, 82.5],
                [1387523745000, 82.4],
                [1387524008000, 78.7],
                [1387524303000, 75.9],
                [1387524667000, 74.6],
                [1387524904000, 74.5],
                [1387525245000, 74.2]
            ]
        }, ]
    });
});
//]]>

Can anyone help me solve this?

Answer 1

It is very simple, yaxis option should be yAxis since JS is case-sensitive.

I think that's it: jsFiddle