Highcharts label grouping

Question

I am making a diagram that should show states in a timeline like diagram. I figured that the best fit for it would be horizontal bar diagram, I added data like this:

series: [{
    data: [?],
    name: 'state1'
}, {
    data: [?],
    name: 'state2'
}, {
    data: [?],
    name: 'state3'
}, {
    data: [?],
    name: 'state1'
}, {
    ....
}, {
    data: [?],
    name: 'state1'
}]

Here's what I'v got: Stacked bar chart

The chart looks like what I need, but I need to somehow group legends, for example this case there should be only 3 legends: state1, state2, state3.

How can I achieve something like this?

What about [this approach](http://stackoverflow.com/q/15926516/1367313) where `linkedTo` is used? — SashkaCosmonaut, Feb 06 '15 at 08:04

score 0 · Answer 1 · edited Feb 06 '15 at 10:20

0

var legends = {};
series.forEach(function(bar){
  legends[bar.name] = bar.data;
});

edited Feb 06 '15 at 10:20

matsjoyce

5,744
6
31
38

answered Feb 06 '15 at 09:32

StAlex

91
2

score 0 · Answer 2 · answered Feb 06 '15 at 09:56

Basing on the answer of @StAlex, I would recommend a similar solution, but without the ECMAScript 5 specific forEach:

var legend = {};
for (var i = 0; i < series.length; i++) {
    var bar = series[i];
    if (!legend[bar.name]) {
        legend[bar.name] = 0;
    }
    legend[bar.name] += bar.data;
}

I assumed that data is a number. If this is not so, add a comment.

score 0 · Accepted Answer · answered Feb 06 '15 at 14:05

I would suggest a different approach, using the column range series type.

This way you can do this with only three series, with a data point for each time slot, rather than a series for each time slot. This saves from having to manipulate the legend or fake other series level actions.

This is an example I did for an earlier question that demonstrates the method (with only two states):

http://jsfiddle.net/jlbriggs/o9ck2zLn/0/

can easily be adapted to use a datetime axis as well, which it seems you might be going for.

Highcharts label grouping

3 Answers3