CODEWITHSUNDEEP
javascripthighcharts
Zach Lome
Zach Lome

Reputation: 21

Highcharts: Is it possible to have a single series exist in multiple stacks in a grouping

I have a stacked, grouped bar graph defined as follows:

each grouping refers to an individual entity; each stack refers to a subset of data on that entity; and each stack has 4 bars on it.

The thing is this: each stack is essentially the same across the groups and bars. Even if there are 5 stacks in a grouping, there are still technically only 4 total bars. However, in Highcharts, the name of a series is irrelevant in terms of how it's grouped; if I have fifty series with the name "Bar 1", even if they have different stacks, I will end up with fifty "Bar 1" entries in the legend.

What I want is a single legend/data entry per bar(e.g. "Bar 1", "Bar 2"), as opposed to a single entry per stack per bar (e.g. "Bar 1 - Stack 1", "Bar 1 - Stack 2", "Bar 1 - Stack 3", "Bar 2 - Stack 1", ad nauseum).

Is this possible?

(for the confused: Highcharts is sort of weird when it comes to grouping/stacking. Although a 'bar' would be a set of stacked bars

Upvotes: 2

Views: 2201

Answers (2)

Duniyadnd
Duniyadnd

Reputation: 4043

This won't really help you get a final result you're looking for, but this is what I had to do.

Set the colors in the chart and repeat them each time.

colors: [
                '#3d3d3d' ,
                '#3d3d3d' ,
                '#008000' ,
                '#008000' ,
                '#86B201' ,
                '#86B201' ,
                '#97cb00' ,
                '#97cb00' ,
                '#f79646' ,
                '#f79646' 
    ]

As long as you are outputting the chart in a sequence that you want, the output would look the same.

The second step is to disable the legend for half the series (the ones repeating).

e.g. of what a series could look like:

{
    name: 'Locked',
    data: [1, 2, 3],
    stack: 'Subitem 1',
    showInLegend: false
}

This will result in half the items that are repeats not to show in your legend. However, what this also means is that you won't be able to hide/show the items by clicking on the items in the legend (if you disable that functionality it won't confuse the user).

Hope that helps.

Upvotes: 3

Linger
Linger

Reputation: 15048

SOLUTION 1

You can combine the data instead of doing the stack and then use the formatter to list the Locked, Unlocked and Potential categories. This is done by adding the additional data to the data points and then accessing it by this.point.locked for example. See Updated jsfiddle for an example using your data.

SOLUTION 2

Use a Donut chart to display your data. The inner portion would be the series identifier and the outer ring would be the count for locked, unlocked and potential.

SOLUTION 3

The legend is enabled or disabled for a chart not a series. So, you could disable the legend. Set each series in the stack to a certain color then use the click event of a point to get the series id and call a function that can toggle the series on or off hide(). In the subtitle you put something like Click on Series to Hide. Then you will also have to add another button to reset/unhide any hidden series.

Upvotes: 2

Related Questions