Group series names in columns in highchart horizon

Question

I am currently using highcharts and there is a requirement for my project to group categories of series names together in the legend but I can't seem to find a way to do this.

There are 3 "categories" of data series that the PM would like to have displayed in 3 columns in the legend. The biggest issue is that one of the 3 categories has a variable number of elements depending on the features selected for inclusion in the chart.

E.G.

In one instance the series might be:

Apples, Pears, Peppers, Cucumbers, Beets, Oranges, Potatoes, Tomatoes, Turnips

and they need to be displayed in the legends like:

+------------------------------+
| Apples    Tomatoes  Beet     |
| Oranges   Peppers   Potatoes |
| Pears     Cucumbers Turnips  |
+------------------------------+

In another case the series might be:

Tomatoes, Apples, Oranges, Peppers, Cucumbers, Potatoes, Pears

and they need to be displayed in the legend like:

+------------------------------+
| Apples    Tomatoes  Potatoes |
| Oranges   Peppers            |
| Pears     Cucumbers          |
+------------------------------+

Is there a way to get this type of formatting with a variable number of series?

Answer 1

This is not possible by the use of default API, but you could create custom legend that will take care of building a proper array.

Example of how to create a custom legend: http://jsfiddle.net/N3KAC/87/

$(function() {
  $('#container').highcharts({
    title: {
      text: ''
    },
    legend: {
      enabled: false
    },

    series: [{
      name: 'Potatoes',
      data: [1, 2, 3, 4, 5]
    }, {
      name: 'Tomatoes',
      data: [7, 6, 5, 4, 3]
    }]
  }, function(chart) {

    $legend = $('#customLegend');

    $.each(chart.series, function(j, series) {

      $legend.append('<div class="item"><div class="symbol" style="background-color:' + series.color + '"></div><div class="serieName" id="">' + series.name + '</div></div>');

    });

    $('#customLegend .item').click(function() {
      var inx = $(this).index(),
        series = chart.series[inx];

      if (series.visible)
        series.setVisible(false);
      else
        series.setVisible(true);
    });

  });
});

.symbol {
  width: 20px;
  height: 20px;
  margin-right: 20px;
  float: left;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
.serieName {
  float: left;
  cursor: pointer;
}
.item {
  height: 40px;
  clear: both;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<div id="customLegend"></div>