score:1

Accepted answer

it cannot be done just by using highcharts constructor options. you can achieve that kind of look and behavior by wrapping some core functions:

(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.firstlegend = new h.legend(chart, merge(chartoptions.legend, chartoptions.firstlegend, {
      legendid: 0
    }));

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

    p.call(this);
  });

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

    p.call(chart, r, a);

    chart.firstlegend.render();
    chart.secondlegend.render();
  });

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

highcharts options:

highcharts.chart('container', {

  chart: {
    marginright: 350 // create some space for the legend
  },

  legend: {
    verticalalign: 'middle',
    width: 300,
    align: 'right'
  },
  firstlegend: {
    y: -25
  },
  secondlegend: {
    y: 25
  },

  series: [{
    data: [5, 6, 7],
    legendid: 0,
  }, {
    data: [2, 3, 1],
    legendid: 0,
  },
  (...)
  {
    data: [1, 8, 2],
    legendid: 1
  }, {
    data: [3, 2],
    legendid: 1
  },
  (...)
  ]
});

live demo: http://jsfiddle.net/kkulig/r70fwasr/

this code can be optimized so that it works for more than 2 legends.

score:1

you can use legend's itemwidth property. here's the link

highcharts.chart('container', {
chart: {
    width: 500
},

title: {
    text: 'legend <em>itemwidth</em> option'
},

legend: {
    itemwidth: 100
},

series: [{
    data: [6, 4, 2],
    name: 'first'
}, {
    data: [7, 3, 2],
    name: 'second'
}, {
    data: [9, 4, 8],
    name: 'third'
}, {
    data: [1, 2, 6],
    name: 'fourth'
}, {
    data: [4, 6, 4],
    name: 'fifth'
}, {
    data: [1, 2, 7],
    name: 'sixth'
}, {
    data: [4, 2, 5],
    name: 'seventh'
}, {
    data: [8, 3, 2],
    name: 'eighth'
}, {
    data: [4, 5, 6],
    name: 'ninth'
}]

});

http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/legend/itemwidth-80/


Related Query

More Query from same tag