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

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

Answer 1

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