Stacked Column Chart With Unequal SubGroups in HighCharts.js - highcharts

Question

I am attempting to create a stacked column chart with an unequal number of "sub-groups".
For example, given the following data:
Category#1 : [SubCategory1: 2, SubCategory2: 4, SubCategory3: 3],
Category#2 : [SubCategory4: 5, SubCategory5: 3],
Category#3 : [SubCategory6: 4, SubCategory7: 3, SubCategory8: 3, SubCategory9: 5]
...
I want to create a column chart where the first column is comprised of three stacked segments and has a total height of 9,
the second column has a stack of two segments with total height of 8,
and the third column has four segments with a total height of 15.
After having worked for a little while with the HighCharts API and generally getting good results, I believe what I want to accomplish is probably doable and I am likely just missing some combination of options or structuring my data incorrectly. Does anyone know what I need to do in order to create such a chart?

Answer 1

Two of the ways you can solve this are:
Giving each point in your series a specific x index that relates to the category index.
Example of a series (JSFiddle):
series: [{
name: 'John',
data: [{x:0,y:5},{x:3,y:7},{x:4,y:2}]
}
Here we skip the 2nd and 3rd category (index 1 and 2), so they will not have a value.
Using null values in your series to skip having it appear in a category.
Example of a series (JSFiddle):
series: [{
name: 'John',
data: [5, null, null, 7, 2]
}
This series also skips the 2nd and 3rd category, like the one above.
Your solution choice may rely on how many null values you would end up with. If it is only a few, then that might be the most lightweight solution. If it is a lot, then using Point objects with x values may be more suitable and cleaner.