score:0

highcharts doesn't support that kind of layout manipulation on legend by default.

the solution here could be extending the highcharts core so that it supports 2 legends or more.

example for 2 legends:

(function(h) {
  var merge = h.merge;

  h.wrap(h.legend.prototype, 'getallitems', function() {
    var allitems = [],
      chart = this.chart,
      options = this.options,
      legendid = options.legendid;

    h.each(chart.series, function(series) {
      if (series) {
        var seriesoptions = series.options;

        // use points or series for the legend item depending on legendtype
        if (!isnan(legendid) && (seriesoptions.legendid === legendid)) {
          allitems = allitems.concat(
            series.legenditems ||
            (seriesoptions.legendtype === 'point' ?
              series.data :
              series)
          );
        }
      }
    });

    return allitems;
  });

  h.wrap(h.chart.prototype, 'render', function(p) {
    var chart = this,
      chartoptions = chart.options;

    chart.toplegend = new h.legend(chart, merge(chartoptions.legend, chartoptions.toplegend, {
      legendid: 0
    }));

    chart.bottomlegend = new h.legend(chart, merge(chartoptions.legend, chartoptions.bottomlegend, {
      legendid: 1
    }));

    p.call(this);
  });

  h.wrap(h.chart.prototype, 'redraw', function(p, r, a) {
    var chart = this;

    p.call(chart, r, a);

    chart.leftlegend.render();
    chart.rightlegend.render();
  });

  h.wrap(h.legend.prototype, 'positionitem', function(p, item) {
    p.call(this, item);
  });
})(highcharts);

live demo: http://jsfiddle.net/blacklabel/6ob2qs1c/

legends can be positioned via their x & y properties. chart.marginbottom creates some space for the legends.

score:1

i've achieved layouts like this by setting the legend itemwidth and width:

  legend: {
    enabled: true,
        itemwidth: 200,
    width:400,
    align: 'center'
  },

https://jsfiddle.net/t7ep0weq/1/


Related Query

More Query from same tag