Display legend items in two columns highcharts

前端 未结 3 804
半阙折子戏
半阙折子戏 2020-12-19 08:45

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

3条回答
  •  执念已碎
    2020-12-19 09:33

    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/

提交回复
热议问题