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.

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.

• javascript
• jquery
• highcharts

• post your code ^^ – Marco Salerno Commented Mar 21, 2017 at 13:05
• @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/… – Hira Majid Commented Mar 21, 2017 at 13:08
• This link doesn't have any legend – Marco Salerno Commented Mar 21, 2017 at 13:09
• @MarcoSalerno, lol - that's because he's asking how to do it. – user153923 Commented Feb 11, 2021 at 19:03

2 Answers 2

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/

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