CODEWITHSUNDEEP
javascripthtmlcsshighcharts
hcharge
hcharge

Reputation: 1246

Display legend items in two columns highcharts

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.

Upvotes: 8

Views: 22493

Answers (3)

Юрій Деревенко
Юрій Деревенко

Reputation: 11

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/

Upvotes: 1

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

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

Upvotes: 17

Roland
Roland

Reputation: 9

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.

Upvotes: 0

Related Questions