HighCharts how to use different plotOptions per yAxis in a multiple axis chart

Question

I need to draw a chart with two yAxis and I also need to stack columns. When I have a single axis, I can stack column three values very well. The problem is when I add a second yAxis (multiple axis) the new three values overlay on the old one. Which results in 6 values in a single stacked column. I don't want this. I wish I could set a different plotOptions to stack the columns according to the new yAxis. Here is what I tried

   $(function () {
    $('#container').highcharts({
        chart: {
            zoomType: 'xy'
        },
        title: {
            text: 'Average Monthly Enveloppe and Effectif in Kinshasa'
        },
        subtitle: {
            text: 'Source: sygecpaf'
        },
        xAxis: [{
            categories: ['Ja', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        }],
        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value}Fc',
                style: {
                    color: '#89A54E'
                }
            },
            title: {
                text: 'Enveloppe',
                style: {
                    color: '#89A54E'
                }
            }
        }, { // Secondary yAxis
            title: {
                text: 'Effectifsl',
                style: {
                    color: '#4572A7'
                }
            },
            labels: {
                format: '{value}',
                style: {
                    color: '#4572A7'
                }
            },
            opposite: true
        }],
        tooltip: {
            shared: true
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            x: 120,
            verticalAlign: 'top',
            y: 100,
            floating: true,
            backgroundColor: '#FFFFFF'
        },
        plotOptions: {
            column: {
                stacking: 'normal'
            }
        },
        series: [{
            name: 'Total',
            color: '#2415cf',
            type: 'column',
            yAxis: 1,
            data: [499, 715, 1064, 499, 715, 1292, 1440, 1760, 1356, 1485, 2164],
            tooltip: {
                valueSuffix: ' mm'
            }

        }, {
            name: 'Payés',
            color: '#4572A7',
            type: 'column',
            yAxis: 1,
            data: [1064, 1941, 956, 544, 1292, 1440, 1760, 1356, 1485, 2164, 1941, 956, 544],
            tooltip: {
                valueSuffix: ' mm'
            }

        }, {
            name: 'Non payés',
            color: '#c572A7',
            type: 'column',
            yAxis: 1,
            data:[1064, 1941, 956, 544, 1292, 1440, 1760, 1356, 1485, 2164, 1941, 956, 544],
            tooltip: {
                valueSuffix: ''
            }

        }, {
            name: 'Total',
            color: '#89A54E',
            type: 'column',
            data: [70, 69, 95, 145, 182, 215, 252, 265, 233, 183, 139, 96],
            tooltip: {
                valueSuffix: ' Fc'
            }
        }, {
            name: 'Payés',
            color: '#89A5fE',
            type: 'column',
            data: [70, 69, 95, 145, 182, 215, 252, 265, 233, 183, 139, 96],
            tooltip: {
                valueSuffix: '°C'
            }
        }, {
            name: 'Non Payés',
            color: '#72c5A7',
            type: 'column',
            data: [70, 69, 95, 145, 182, 215, 252, 265, 233, 183, 139, 96],
            tooltip: {
                valueSuffix: '°C'
            }
        }]
    });
});

Can anyone edit this fiddle to help what I want to do?

Thanks

Answer 1

I Finally solved the issue. In fact, I had to define the stack property within each series

    ....,{
            name: 'leg1',
            stack: 'effstack',
            yAxis: 1,
            data:[...],

        },{
            name: 'leg2',
            stack: 'effstack',
            yAxis: 1,
            data:[...],

        },{
            name: 'leg3',
            stack: 'otherstack',
            yAxis: 0,
            data:[...],

        },{
            name: 'leg4',
            stack: 'otherstack',
            yAxis: 0,
            data:[...],

        },...

Here is the new jsfiddle