Highcharts: How to link legend to categories rather than to bar series?

0
votes

Using Highcharts to display a bar chart, is there a built-in way to link legend items to categories rather than to series? As such I would see a chart with a bunch of bars, and when I click a legend item it would show or hide just the bar(s) associated with a single category.

Thanks

2
javascripthighcharts
You can use something like this: jsfiddle.net/whFvA/4 – Sebastian Bochan
I like where this is going, but would prefer that the legend itself control the visibility of the bars, rather than a separate set of controls. – Doug Kent
You can prepare a HTML legend or catch a legendItemClick event and then call actions which are in my fiddle. This is only simple demo, so you can develop on your own. – Sebastian Bochan
Sebastian, simply using legendItemClick is not sufficient, as I need the legend to display one item per bar. You suggested "prepare a HTML legend". That sounds to me like reimplementing the entire legend. Can you please clarify? Thanks. – Doug Kent

2 Answers

0
votes

There is not a built in way.

You can fake it in a number of ways, however.

One way is to use a separate series for each category, set grouping to false, dummy the x values to hover around the actual category value.

plotOptions: {
  series: {
    grouping: false,
    pointRange: 0.2
  }
},    
series: [{
  name: 'Group A',
  data: [[-0.25,5],[0,7],[0.25,6]]
}]

Example:

0
votes

In the end, I found no out-of-the-box way to do this. But I found a solution that works, as follows:

  1. correlate each bar with a single series (see fiddle referenced above)

  2. in legendItemClick:

    • manually show or hide the series associated with the clicked-on legend item
    • given visibility of each category, recompute the indices of each visible category and update each visible bar series data[0].x with the new index of the category with which it is associated (use point.update())
    • call xAxis.setCategories with a list of the categories you want to be currently visible
    • call xAxis.setExtremes with the new extremes for the category indices

Here is a very simple example of the above:

legendItemClick = function (e) {
        var seriesClicked = e.currentTarget;
        var chart = seriesClicked.chart;
        var axis = chart.xAxis[0]

    if (seriesClicked.visible) {
        seriesClicked.hide();
        chart.series[2].data[0].update( { x: 1 });
        axis.setCategories(['Group A', 'Group C'], false)
        axis.setExtremes(0, 1, true)

    } else {
        seriesClicked.show();
        chart.series[2].data[0].update( { x: 2 });
        axis.setCategories(['Group A', 'Group B', 'Group C'], false)
        axis.setExtremes(0, 2, true)
    }
    return false;
}

And a fiddle: http://jsfiddle.net/dkent600/e6357a22/17/