How To Toggle Legend Layout In Highchart

I am interested to change legend layout on click event as below 1st click horizontal - bottom 2nd click horizontal top 3rd click virtical left 4th click virtical right Here is Link

Solution 1:

Here's a way to do it here. I hate resorting to setting the internal dirty flags but it seems to work well:

var somePositions = [['center','bottom'],
                     ['center','top'],
                     ['left','middle'],
                     ['right','middle']];

 $('#btn').click(function(){
      posIdx++;
      if (posIdx == 4) posIdx = 0;                
      chart.legend.options.align = somePositions[posIdx][0];
      chart.legend.options.verticalAlign = somePositions[posIdx][1];
      chart.isDirtyLegend = true;
      chart.isDirtyBox = true;
      chart.redraw();
 });

Solution 2:

You need to use tranlsate() function which allows to move SVG elements like legend.

var legend = chart.legend.group;

        $('#btn').click(function(){
            legend.translate(0,0)
        });

http://jsfiddle.net/F3cSa/1/