How to change the layout and the alignment of the legend in the Highchart?

Question

I am trying to change the layout and the alignment of the legend in the Highchart .

In the JavaScript, the code was initially:

showInLegend: true

then I modified it to:

legend: 
{
    layout: 'vertical',
    enabled: true,
    x: 0,
    y: 20,
    align: 'right',
    verticalAlign: 'middle',
    margin: 30,
    ...
}  

... and yet, the legend has still not moved.

Answer 1

Make sure you don't have duplicated property legend in your chart options.

In genera it works, see: http://jsfiddle.net/3bQne/1010/

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container1'
    },
    legend: {
        layout: 'vertical',
        enabled: true,
        x: 0,
        y: 20,
        align: 'right',
        verticalAlign: 'middle',
        margin: 30
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0]
    }]
});