Highcharts - change column stacking on click

Question

I have a lovely Highcharts plot with stacked columns. I'd like a button which can toggle whether the stacking is 'normal' or 'percent'.

I'm trying the following (which doesn't work):

  $('#button').click(function () {
        var chart = $('#container').highcharts();
        chart.options.plotOptions.column.stacking = 'percent';
        chart.redraw();
  });

Fiddle here: http://jsfiddle.net/CRKcj/2/

Any help would be much appreciated!

Answer 1

It's not possible to change plotOptions in real time. Instead you can update options for each series instead, for example:

$('#button').click(function () {
    var chart = $('#container').highcharts(),
        s = chart.series,
        sLen = s.length;

    for(var i =0; i < sLen; i++){
        s[i].update({
            stacking: 'percent'   
        }, false);   
    }
    chart.redraw();
});

Jsfiddle demo here.