Highcharts sizing bars in a Grouped and stacked barcharts - highcharts

Question

In a previous question, Paweł Fus was so kind to come up with a grouped stack bar chart solution for me. You can find the question and answer here for context: Grouping a stacked bar chart in Highcharts
I am now attempting to use this approach and i am plagued with issues because this doesn't seem to scale well at all. In the scenario in the previous post there was only two bars per group to keep it a simple example. In reality there could be any number of bars. With the approach laid out in Pawel Fus's answer, just adding a a third bar breaks it. The reason is that the pointPlacement is dependent on the number of bars which is an easy fix but you'll quickly realize that the bars are not getting automatically adjusted to account for the width. Take a look at this jsfiddle for a simple demo of what im talking about:JsFiddle
Mandatory random code block to make Stack overflow happy... just ignore this code block.
So my questions are:
is there a better solution to my original question that would avoid all this?
Assuming that this is the correct approach, how do i calculate and set the width of these bars accordingly then set the correct pointplacments. I did find that i can get the chart height but not till the Highcharts object is created and i'm programatically creating this Highcharts config so i don't have access to it at that point.

Answer 1

You can try different approach, but formatting data isn't so obvious: http://jsfiddle.net/1ktmb2d2/3/ (or this one: http://jsfiddle.net/1ktmb2d2/4/) - now each vertical columns are different stacks, and names of that stacks doesn't really matter (formatter must be changed).
Note: when displaying different number of columns per category, it will always create a gap in the category where the number of columns is the lowest.
Simplified data:
series: [{
name: 'Happy',
id: 'Happy',
stack: 'Corolla',
color: 'blue',
data: [20, 30],
}, {
id: 'Unhappy',
name: 'Unhappy',
stack: 'Corolla',
color: 'black',
data: [10, 30],
}, {
linkedTo: 'Happy',
stack: 'Prius',
color: 'blue',
data: [30, 30],
}, {
linkedTo: 'Unhappy',
stack: 'Prius',
data: [30, 30],
color: 'black',
}, {
linkedTo: 'Happy',
stack: 'Highlander',
color: 'black',
data: [30],
}]

Answer 2

So we have tried many things but have decided that Highcharts just isn't meant to do this sort of thing. We have given this feedback to our UX team as a limitation of what we can implement with Highcharts at this time. In the mean time we have made our labels more informative as a stop gap. This comes at the cost of making those labels very bulky.
I do agree with the UX design that sometimes it makes sense to group our stacked bars within our charts to make a clear and readable chart for our end user. I looked around at other charting frameworks and i didn't see anyone offering a way to do this. I would not say highcharts is lagging behind it's competitors but it could definitely differentiate it's self if it chose to implement a easy to use feature like this