kschick989
Posts: 6
Joined: Tue Mar 21, 2023 2:04 am

Stacked bar chart with distinct groupings

Hello,

I'm trying to get a bar chart to look something like the following image. Is this possible? What would be the best way to go about this.
Image
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: Stacked bar chart with distinct groupings

Welcome to our forum and thanks for contacting us with your question!

I prepared a chart similar to what you provided on the image. To achieve different bars, next to each other you need to add multiple yAxis and position them with left and width properties.

Demo: https://jsfiddle.net/BlackLabel/hL4spkag/

Let me know if that was what you were looking for!
Best regards
Jakub
kschick989
Posts: 6
Joined: Tue Mar 21, 2023 2:04 am

Re: Stacked bar chart with distinct groupings

Ah I see. This is perfect. Thank you so much!
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: Stacked bar chart with distinct groupings

You're welcome!
In case of any further questions, feel free to contact us again.

Kind regards
Jakub
kschick989
Posts: 6
Joined: Tue Mar 21, 2023 2:04 am

Re: Stacked bar chart with distinct groupings

Ah I actually do. Say I wanted to have a horizontal bar that would span across all three y-axis with no breaks in between. Is that possible? Would I need to use a portal and inject another chart? Would that be the right direction?

Something like this
Image
jakub.s
Posts: 1167
Joined: Fri Dec 16, 2022 11:45 am

Re: Stacked bar chart with distinct groupings

Thanks for the question!

You can achieve a similar result with multiple axes. The "test" would be the first xAxis, the 3 columns would belong to the second xAxis.

Here's a demo: https://jsfiddle.net/BlackLabel/sfvLtoa6/

Let me know if that helps.

Regards,
Jakub
Jakub
Highcharts Developer
kschick989
Posts: 6
Joined: Tue Mar 21, 2023 2:04 am

Re: Stacked bar chart with distinct groupings

Great! Thank you!
jakub.s
Posts: 1167
Joined: Fri Dec 16, 2022 11:45 am

Re: Stacked bar chart with distinct groupings

Sure, no problem.

Let me know if you have any more questions.

Regards,
Jakub
Jakub
Highcharts Developer
kschick989
Posts: 6
Joined: Tue Mar 21, 2023 2:04 am

Re: Stacked bar chart with distinct groupings

Hello! Had a few more questions.

Please see the fiddle:
https://jsfiddle.net/fsadzcqx/2/

1. Is it possible to have the Totals blue bar at the top extend all the way to the edge? So that it is flush with the other groups. Right now the groupings beneath it seem to overextend.

2. Each y-axis has a width of 25%. Why does group 4 seem to be longer compared to the others? Despite having a lower number.

3. Is there a way to decrease the spacing between each of the groups?
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: Stacked bar chart with distinct groupings

Hey,

1. You can do it by setting yAxis.max on the corresponding yAxis, it has the be a lower value than the one in series data so that the bars spans all over the axis.

2. It is because the bars length it calculated based on other data in the same series. So if the difference between the highest and lowest data is small, than the biggest bar will be quite long. You can check it out by passing data from group 2 to group 4 and the bars will have the same length then.

3. I changed the first 3 yAxis to be 30% wide and it helped with the spacing and also minimized the difference between the 4th yAxis.

Demo: https://jsfiddle.net/BlackLabel/c2kr7oy1/

Feel free to ask any further questions!
Best regards
Jakub
kschick989
Posts: 6
Joined: Tue Mar 21, 2023 2:04 am

Re: Stacked bar chart with distinct groupings

Hello,

Thank you for the information. Especially for point number two in terms of how much space is allocated.

Since the length of the bar is always calculated based on the difference between largest and smallest number in the series, Is there a way to configure so that the first bar in tier 1 always fills the space. Would setting the min property to be the largest number in the series do it?
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: Stacked bar chart with distinct groupings

Hey,

I changed the solution a bit, now there is a parsing function which takes the data as parameter and return points with y value relative to the biggest point and a value which displays in the dataLabel and the tooltip. All the biggest bars are the same size, and also yAxis.width was reduced to 23% to fit the bars.

Demo: https://jsfiddle.net/BlackLabel/nq2zcLd6/

I hope this helps!
Best regards
Jakub

Return to “Highcharts Usage”