Легенда: разрыв строки, поэтому следующие легенды начинаются со следующей строки

Question

Я хотел бы разделить легенды на строки, например, я хочу, чтобы в каждой строке было 2 легенды.

Я пытался использовать labelFormatter , но тег
тормозит только строку в тексте этикетки, а не строку для легенд.

Highcharts.chart('container', {
 ...
 legend: {
     enabled: true,
     useHTML: true,
     labelFormatter: function() {
       if (this.index == 2) {
         return this.name + '<br/>';
       } else {
         return this.name;
       }
     }
   },
...
});

Демо: https://jsfiddle.net/ivane_gkomarteli/t7ep0weq/

Как я могу изменить labelFormatter , чтобы у меня было 2 легенды на строку?

UPDATE

Установка itemWidth и width не решает мою проблему, потому что я хочу разбить строку в соответствии с условием «если еще». Например:

     ...
     labelFormatter: function() {
       if (something == true){
         if (this.index == 2) {
           return this.name + '<br/>';
         } else {
           return this.name;
         }
       } else {
         if (this.index == 4) {
           return this.name + '<br/>';
         } else {
           return this.name;
         }
       }
     }
     ...

Возможный вывод:

• 1-я строка: 2 легенды
• 2-я строка: 4 легенды
• 3-я строка: 4 легенды

Answer 1

Highcharts по умолчанию не поддерживает такого рода манипуляции с легендами.

Решением здесь может быть расширение ядра Highcharts , чтобы оно поддерживало 2 или более легенд.

Пример для 2 легенд:

(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);

Демонстрационная версия: http://jsfiddle.net/BlackLabel/6ob2qs1c/

Легенды можно позиционировать через их свойства x & y. chart.marginBottom создает пространство для легенд.

Answer 2

Я достиг таких раскладок, установив легенду itemWidth и width:

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

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