ac2022
Posts: 3
Joined: Mon May 09, 2022 5:25 pm

How can I create bar chart groups that can spaced away from other groups?

I was given this mock up but couldn't find how to recreate it in high charts. It looks like basically grouping bars over an x-axis label. I've seen posts about bar spacing using padding but how can I affect the spacing of both individual bars and groups of bars?
HighChartMockUp.PNG
HighChartMockUp.PNG (29.47 KiB) Viewed 210 times
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: How can I create bar chart groups that can spaced away from other groups?

Hi ac2022,

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

Here is a reproduction of a similar chart:
https://jsfiddle.net/BlackLabel/ha19bcLo/

Spacing between group of points, that are located on x axis categories can be adjusted using groupPadding option, and spacing between individual points within group of points can be adjusted with pointPadding property.

Let me know if it was what you were looking for.
Regards!
Mateusz Bernacik
Highcharts Developer
ac2022
Posts: 3
Joined: Mon May 09, 2022 5:25 pm

Re: How can I create bar chart groups that can spaced away from other groups?

mateusz.b wrote: Mon May 09, 2022 11:21 pm Hi ac2022,

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

Here is a reproduction of a similar chart:
https://jsfiddle.net/BlackLabel/ha19bcLo/

Spacing between group of points, that are located on x axis categories can be adjusted using groupPadding option, and spacing between individual points within group of points can be adjusted with pointPadding property.

Let me know if it was what you were looking for.
Regards!

Mateusz, that looks exactly like what I'm looking to do. This is awesome. Thank you so much!
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: How can I create bar chart groups that can spaced away from other groups?

You're welcome! In case of any further questions, feel free to contact us again.
Mateusz Bernacik
Highcharts Developer
ac2022
Posts: 3
Joined: Mon May 09, 2022 5:25 pm

Re: How can I create bar chart groups that can spaced away from other groups?

mateusz.b wrote: Tue May 10, 2022 12:08 am You're welcome! In case of any further questions, feel free to contact us again.
Hey Mateusz.b,

I meant to ask and can't seem to find an answer. In your example, the <br/> doesn't show up in your tool tips. Do you know why the html tags are showing up in mine? Is there a way to not have them show up in the hover overs? Thanks!
Attachments
HTMLinHighChartTitle.PNG
HTMLinHighChartTitle.PNG (12.25 KiB) Viewed 189 times
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: How can I create bar chart groups that can spaced away from other groups?

Hi there!

I was trying to reproduce your issue in the demo, but in my case everything is working correctly. I cannot get the <br> tag to display in the tooltip.

The only solution I can think of right now is to change the </br> tag to <br> or <br/>, but if you could send me your code in JSFiddle (or some online code editor) I would be more than happy to help you find the solution.

Waiting for your response,
Thank you!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Usage”