Grouping a stacked bar chart in Highcharts

Question

I have a situation that I need to group certain bars/columns into logical grouping for a business need. I do not care if it is a stacked bar or a stacked column but I need to group certain stacks together. The individual stacks still need to be labeled. Highcharts is my current target but if this is not achievable i will entertain the idea of another library. I'd be very interested in a interactive example via plunker, jsfiddle, ect so i can confirm quickly the idea you are presenting or ask inteligent follow up questions if needed.

Some other parameters i have:

My UX designers want the bars to be clusters together so things like http://blacklabel.github.io/grouped_categories/ wont work. We are working with a good amount of data.
I need to be able to toggle the 'happy', and 'unhappy' segments like i would do with a standard stacked bar.

Example Chart

Toyota | ########%% Prius
       | ######%%   Corolla
       |
Honda  | #####%%%%  Civic
       | ###%%      Accord

'#' Happy '%' unhappy

Updates and Responses

Paweł Fus: Did you miss 'column-stacked-and-grouped'

I did not miss the demo in Highcharts that you mentioned. If you attempt to use that method to solve the use case i presented it actually doesn't work. This was my first mistake when I was attempting to solve this problem. It's hard for me to put into words but it basically allows you to take your normal "stack" and split it out into smaller stacks in some way that makes sense for you. I only have two things stacked, "Happy" and "unhappy", it doesn't work for me at all. If I have missed something tho i'm very interested to see how it is done.

Example using 'column-stacked-and-grouped' in current use case

With only 2 data points to stack this results into a standard grouped bar chart

Prius  | ######## 
       | %%
       |
Corolla| #####
       | %% 

'#' Happy '%' unhappy

If i have more datapoints it is more helpful but still doesnt get to what i need

Prius  | ########$$$ 
       | %%***
       |
Corolla| #####$$$
       | %%*** 

'#' Happy  '$' Content '*' Distatisfied '%' Unhappy

Plunker

http://plnkr.co/edit/vlsqdqROL3ekEZxO8YLp?p=preview

Mocked image

https://i.stack.imgur.com/A1riu.png

I think you have missed this demo from Highcharts: http://www.highcharts.com/demo/column-stacked-and-grouped — Paweł Fus, Aug 29 '14 at 10:53
Thanks for the comment Paul but it doesn't meet the use case. I have attempted to explain by updating the original post. Please feel free to point out what i'm missing. — Nexeh, Aug 29 '14 at 12:45
I'm not sure where is the problem. You want horizontal bars? Change series type to 'bar', see: http://jsfiddle.net/zbLqg33w/ — Paweł Fus, Aug 29 '14 at 13:14
No issue with bar vs Column. The problem is that Janet(prius) is stacked on top of Jane(Corolla). I need Jane and Janet to be thire own stacks of their own and labeled accordingly. Then Janet(prius) and Jane(Corolla) need to be stacks of their own showing their "happy" "unhappy" counts. The legend also need to toggle on and off "happy" and "Unhappy". Want me to draw this out? id update your fiddle but obviously this is the problem that im trying to solve. i don't think its possible to do — Nexeh, Aug 29 '14 at 13:28
Added a plunker that shows the chart of the sample data obviously lacking the grouping. Working on a altered/mockedup image — Nexeh, Aug 29 '14 at 14:38
I'm still not sure where is the problem: http://plnkr.co/edit/cE9bPuE7YHPphfFHadOD?p=preview :) If the problem is with legend (to be there only happy/unhappy) use `linkedTo` option. — Paweł Fus, Aug 29 '14 at 15:17
Yeah you need to see the image, does this link work for you? https://plus.google.com/u/0/photos/albums/pprpcjgfphasfq6c9tei9htcgid5hmtjn?pid=6053008875721994642&oid=106252089859839279308 Im blocked from sharing images but i think this worked. — Nexeh, Aug 29 '14 at 15:27
back up link: https://docs.google.com/file/d/0Bx5B9-SpE6hSbW5ZTllYSUJKdTg/edit — Nexeh, Aug 29 '14 at 15:34
Okay, I see now, thanks! Now simply use yAxis.stackingLabels to show that labels names. By stack name use stack: 'Civic' for series, I thin kthat should help. — Paweł Fus, Aug 29 '14 at 15:36
Pawel Fus: I hope i didn't lose you! Could you do a plunker for me showing your solution. Throw it in an answer if you want so i can vote it as well seeing as you are sounding so confident :) — Nexeh, Aug 29 '14 at 18:39

score 3 · Accepted Answer · answered Sep 01 '14 at 12:22

Example: http://jsfiddle.net/1ktmb2d2/1/

Series format:

    series: [{
        name: 'Happy',
        id: 'Happy',
        stack: 'Corolla',
        color: 'blue',
        data: [20],
        pointPlacement: -0.25
    }, {
        id: 'Unhappy',
        name: 'Unhappy',
        stack: 'Corolla',
        color: 'black',
        data: [10],
        pointPlacement: -0.25
    }, {
        linkedTo: 'Happy',
        stack: 'Prius',
        color: 'blue',
        data: [30],
        pointPlacement: 0.25
    }, {
        linkedTo: 'Unhappy',
        stack: 'Prius',
        data: [30],
        color: 'black',
        pointPlacement: 0.25
    }, {
        linkedTo: 'Happy',
        stack: 'Civic',
        color: 'blue',
        data: [ [1,30] ],
        pointPlacement: -0.25
    }, {
        linkedTo: 'Unhappy',
        stack: 'Civic',
        data: [ [1, 30] ],
        color: 'black',
        pointPlacement: -0.25
    }, {
        linkedTo: 'Happy',
        stack: 'Accord',
        color: 'blue',
        data: [ [1, 30] ],
        pointPlacement: 0.25
    }, {
        linkedTo: 'Unhappy',
        stack: 'Accord',
        data: [ [1, 30] ],
        color: 'black',
        pointPlacement: 0.25
    }]

There is bug in Highcharts for stackedLabels. Workaround will be to use simple label formatter: http://jsfiddle.net/1ktmb2d2/2/

Note: It may be possible to use a slightly different format for series and get the same result, I guess.

Note2: I really don't like plnkr, o I used jsFiddle. Also, looks like Highcharts-ng doesn't support stackLabels.formatter: http://plnkr.co/edit/7bjXpBXppv1UXf0YzGMZ?p=preview

Thank you Pawel. This is a lot to accomplish something that should be so much simpler. Do you agree? Do you think it's something that should be a feature request of highcharges? Seems to me that i could indicate a Grouping/Cluster/Category/Name-Of-Your-Choice to a series in a standard stacked Bar/Column and the configuration would be so much simpler. — Nexeh, Sep 03 '14 at 12:21
Sure, you can always create an idea for that feature [here](http://highcharts.uservoice.com/forums/55896-general). — Paweł Fus, Sep 03 '14 at 12:55

score 0 · Answer 2 · answered Sep 04 '18 at 21:42

I'm facing a similar problem, and here's what I did to solve it.

http://jsfiddle.net/ldong/h2jysu9f/

Basically, I pulled http://blacklabel.github.io/grouped_categories/grouped-categories.js and customized the series, x and y axis to the format that this highchart plugin uses.

score 0 · Answer 3 · answered Nov 09 '18 at 13:04

Just make the below given changes to https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/column-stacked-and-grouped/ and get a grouped stacked bar chart in highchart.

chart: {
        type: 'bar'
},
plotOptions: {
    bar: {
        stacking: 'normal'
    }
}