Issue on Setting Two yAxis in Highcharts.js

Question

Can you please take a look at this demo and let me know why I am not able to set the other side yAxis , as well?

$(function () {
            $('#chart2').highcharts({
        chart: {
            type: 'column'
        },
         credits: {
            enabled: false
        },
            title: {
            text: 'The Chart Title Goes Here!',
              style: {
                color: '#5882FA',
                fontWeight: 'normal',
                fontSize: '11',
                marginBottom: '30'
            }
        },

        xAxis: {
            categories: ['Roads', 'Powerlines'],

        },
                  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
            }],
        legend: {
        enabled: false
    },
         tooltip: {
            formatter: function() {
                return this.x +
                    ' is <b>'+ this.y +'</b>';
            }
        },

        series: [{
            data: [{
                name: 'Roads',

                y: 200
            }, {
                name: 'Powerlines',
                color: '#FF00FF',
                y: 50
            }]
        }]
    });
});

I find some sample on the Highcharts API and I tried to follow them on my demo but they didn't work!

Highcharts : bar chart with multiple y axes

Answer 1

Well, I think you need to fix your series object. How about this :

series : [{
        data : [{
                name : 'Roads',

                y : 200
            }, {
                name : 'Powerlines',
                color : '#FF00FF',
                y : 50
            }
        ]
    },
    {
        yAxis : 1,
        data : [{
                name : 'Roads',

                y : 30
            }, {
                name : 'Powerlines',
                color : '#FF00FF',
                y : 10
            }
        ]
    }
]

Also you need to add yAxis : 1 as an id to axis (you can explicitly set the id of an axis to make sure)

Answer 2

I have corrected the problem with your code: DEMO

You will have to pass series data for each y-axis individually:

series: [{
            name: 'Rainfall',
            type: 'column',
            yAxis: 1,
            data: [49.9, 71.5],
            tooltip: {
                valueSuffix: ' mm'
            }

        }, {
            name: 'Temperature',
            type: 'column',
            data: [7.0, 6.9],
            tooltip: {
                valueSuffix: ' °C'
            }
        }]