Highcharts: show series on legend but hide on chart

Question

Is there a way in highcharts where we can hide a series from the chart, but still display it on the legend?

Alternatively, can we add an imaginary/pseudo legend item but not really existing in the chart?

For context: the client asked us to color the bars depending on their category (the first 10 bars should be the default color dark blue, the next 2 bars would be colored blue, the last 3 bars light blue). Now they're requesting we put 3 legend items: Group A (for the first 10 bars), Group B (for the next 2), Group C (for the last 3). Group B and C do not need to be clickable as they are imaginary legends.

Maybe you can use chart.renderer.label for adding new labels to your legend? — Grzegorz Blachliński
You could add dummy series with no data to account for them. — jlbriggs
@jlbriggs tried that but the hidden series ended up taking space on the chart even if the pointWidth is set to 0. — bonbon.langes

jlbriggs jlbriggs · Accepted Answer · 2016-08-17T12:23:36

You can set up any number of dummy series, with no data, which will set up an entry in the legend.

To make sure the dummy series do not take up any space in the plot area, you can set grouping: false in the plotOptions.

Code:

plotOptions: {
  series: {
    grouping: false,
    events: {
      legendItemClick: function() {
        return false;
      }
    }
  }
}

The legendItemClick event returning false stops the legend from showing/hiding the series. You could get much more elaborate with the function if you wanted different behavior.

Of course, if you wanted the full behavior of the legend, you can build the chart with three actual series, rather than using two dummy series, and just supply the data as [x,y] pairs.

Fiddle:

http://jsfiddle.net/jlbriggs/3d3fuhbb/167/

Output:

Highcharts: show series on legend but hide on chart

2 Answers