How can we change legends position in Highcharts?

Question

I'm using Highcharts API for one of my project.

I need legends on the right side and chart on the left as in below link. Can anyone have any idea how to do this in Highcharts?

Many thanks in advance.

Please check this image.

Pase

post your code ^^ – Crossbeam

@MarcoSalerno I didn't add any code . You can see this fiddle how can I customize this. jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/… – Pase

This link doesn't have any legend – Crossbeam

@MarcoSalerno, lol - that's because he's asking how to do it. – Catcher

Answer 1

Set legend's layout, align and verticalAlign options as follows:

 legend: {
   layout: 'vertical',
   align: 'right',
   verticalAlign: 'middle',
   itemMarginTop: 10,
   itemMarginBottom: 10
 },

By itemMarginTop/Bottom you can control the padding between the legend items.

example: http://jsfiddle.net/ca8h5eqz/

Crop

Thanks @Crop for your help. – Pase

Answer 2

I have tried all answers on the internet, but none has worked. I want to change the position (transform) of the legend-box while the horizontal mode

legend: {
        align: 'top',
        layout: 'horizontal',
        itemStyle: {'width': '100%'},
        verticalAlign: 'bottom',
        x: 0,
        y: 0,
    },

it would be like this

although the only solution I stand on and suggest is a function to change the Highchart while loading and redrawing

alonge to this purpose you need to include this code in initializing part of Highchart

chart: {
        renderTo: 'container',
        type: 'pie',
        events: {
            load: function() {
                legendsPosition(this)
            },
            redraw: function() {
                legendsPosition(this)
            }
        }
    },

and the legendsPosition function code is

var legendsPosition = function (chart) {
    var legends = chart.legend.group;
    var neededSpace = 40; //amount pixels you want to increase
    var newLegendsTranslateY = legends.alignAttr.translateY + neededSpace
    $(legends)[0].attr("transform", "translate(50," + newLegendsTranslateY + ")")
};

and maybe it would be better if you put it before the Highchart initial function

Letreece