Search code examples
javascriptjqueryhighcharts

How can we change legends position in Highcharts?

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.

Image Link

Solution

  • 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/

    pie