Display legend items in two columns highcharts

Question

In highcharts is it possible to display the legend in two columns, stacked vertically?

I\'m trying to work out the best way of displaying the legend items, at the mo

Answer 1

Have you tried to use itemWidth parameter?

Please take look at

http://jsfiddle.net/B9L2b/1266/

 legend: {
    width: 200,
    itemWidth: 100
},

http://api.highcharts.com/highcharts#legend.itemWidth

EDIT:

http://jsbin.com/oyicuc/31/

width:600,
        itemWidth:300,
        itemStyle: {
          width:280
        }

http://api.highcharts.com/highstock#legend.itemStyle

Answer 2

Maybe you could use the "labelFormater" of the legend.

http://api.highcharts.com/highcharts#legend.labelFormatter

Then you could create a table and arrange the legend text as you wnat.

Have a look at the example on the documentation page.

Answer 3

function renderElements() {
      if (this.legend) {
       this.legend.destroy();
      }
      //distance between 2 elements
      let itemDistance = this.legend.options.itemDistance;
      //the biggest element
      let maxItemWidth = this.legend.maxItemWidth;
      //make the width of the legend in the size of 2 largest elements + 
      //distance  
      let nextLegendWidth = (maxItemWidth * 2) + itemDistance;
      //container width
      let boxWidth = this.plotBox.width;
      //if the length of the 2 largest elements + the distance between them 
      //is less than the width of           container, we make 1 row, else 
      //set legend width 2 max elements + distance between
    if (boxWidth < nextLegendWidth) {
     this.legend.options.width = maxItemWidth;
    } else {
     this.legend.options.width = nextLegendWidth;
  }

  this.render()   
}

chart: {
    events: {
      load: renderElements,
      redraw: renderElements
  }
}

https://jsfiddle.net/jecrovb7/38/