javascript - 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 moment we have the legend items all stacked on top of each other.

There will be a maximum of 4 series on the chart.

I'm not really sure how to approach this, I see the option of useHTML but then I can't seem to find any examples of what to do with the HTML.

http://jsbin.com/oyicuc/9/edit

Any advice would be very helpful, thanks.

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