Highcharts stacked and grouped columns: Share label across all stacks

Question

I would like to create a stacked and grouped column chart where a label with the same name controls the data in all associated stacks in all groups.

Example (and approximation what i would like to achieve): http://jsfiddle.net/7760f4nv

series: [{
    name: 'John',
    data: [5, 3, 4, 7, 2],
    stack: 'night'
}, {
    name: 'John',
    data: [3, 4, 4, 2, 5],
    stack: 'day'
}, {
    name: 'Joe',
    data: [2, 5, 6, 2, 1],
    stack: 'night'
}, {
    name: 'Joe',
    data: [3, 0, 4, 4, 3],
    stack: 'day'
}]

With the series configured like this the legend ends up having two labels for "John" and two labels for "Joe". Each label activates/deactivates the "John"/"Joe"-series in all groups but in each stack separately.

In the final solution there should be only one label "John" and one label "Joe" controling the associated series in all groups and stacks simultanously. EDIT: If i click on the "John" button, it should look like after the deactivation of the two "John" series in the fiddle. The "upper level" of all stacks should now be hidden.

Is there some highcharts setting for this I may have missed? Thanks!

Answer 1

If I understand correctly, what you need is the linkedTo property.

Example:

• http://jsfiddle.net/7760f4nv/1/

Reference:

• http://api.highcharts.com/highcharts#plotOptions.series.linkedTo

Answer 2

Other solution, based on hiding legend items and overriding the legendItemClick behaviour.

See here: https://stackoverflow.com/a/31029535/461499