JamesW
Posts: 37
Joined: Wed Feb 03, 2021 3:33 pm

Columns not taking up full width of x-axis

Hi

I have a column chart where we calculate the widths of the columns so that they fit between the datetime x-axis ticks with the same gap in-between each of the columns and shift the columns to be in the correct place as per this post here: viewtopic.php?p=188030

This chart seemes to work fine when I have a column series and a line series on but when I just have a column series displayed the columns do not take up the full width of the x-axis, there always seems to be some padding on the left and right of the x-axis.

One way that nearly fixed it was to set { pointPlacement: "on" }, but with this on, the first column ends up in the wrong place.

Do you know what I could do to fix this issue?

I've setup an example chart here:
https://codesandbox.io/p/sandbox/highch ... 3A611%2C20

Also I tried uploading screenshots to add to this post but it just gave me an error when I tried to upload attachments.

Thanks
J.
jakub.s
Posts: 1218
Joined: Fri Dec 16, 2022 11:45 am

Re: Columns not taking up full width of x-axis

Hi,

Thanks for the question!

Unfortunately, the sandbox that you've included does not seem to work for me ('It's likely that the Sandbox you're trying to access doesn't exist or you don't have the required permissions to access it.').

Could you please try to create a minimal reproducible example in JSFiddle?

You could start from here: https://jsfiddle.net/BlackLabel/dshunwmy/

I'll be waiting for your response.

Best regards!
Jakub
Highcharts Developer
JamesW
Posts: 37
Joined: Wed Feb 03, 2021 3:33 pm

Re: Columns not taking up full width of x-axis

I've created an example for you here: https://jsfiddle.net/jameswilkinson_77/5qpmvae0/71/

Although it seems to be working as expected there, so could be an issue within our app, will check further.
JamesW
Posts: 37
Joined: Wed Feb 03, 2021 3:33 pm

Re: Columns not taking up full width of x-axis

Hi Jakub

I'm actually still having problems with this issue, once I start using the navigator then I get problems with the chart.

I've set up an example now https://jsfiddle.net/jameswilkinson_77/jvgmp6ck/80/ which is working fine, but then when I enable the render event on the chart which calculates the column widths and positions the columns so they are between the ticks the chart starts to have problems.

Padding is added to the xAxis and the navigator no longer works correctly.
jakub.s
Posts: 1218
Joined: Fri Dec 16, 2022 11:45 am

Re: Columns not taking up full width of x-axis

Hi James,

I've tested it out and seems to work nice (at first glance, at least). Could you please tell me what kind of problems do you experience once you use the render function that you've implemented?

Regards!
Jakub
Highcharts Developer
JamesW
Posts: 37
Joined: Wed Feb 03, 2021 3:33 pm

Re: Columns not taking up full width of x-axis

Thanks for getting back to me.

Once you enable the render function the columns are sized and positioned between the ticks fine.

But the columns don't fit the x-axis exactly, there is a gap on the left when I need the columns to fit the width of the x-axis.

Also the navigator changes when you change the data range, but is fine when I don't have the render function enabled.

I've tried lots of different settings to fit the columns to the x-axis but nothing seems to do the trick, the closest I could get was to set:

Code: Select all

{ pointPlacement: "between" }
But this messed up the first column width and placement and also when you change the chart range.

Also I'm struggling to add attachments to my messages, it pops up with 'HTTP error.' and then there is no way to add my files.

Thanks J.
jakub.s
Posts: 1218
Joined: Fri Dec 16, 2022 11:45 am

Re: Columns not taking up full width of x-axis

Hi,

Thanks!

I've analyzed the issue and it might be difficult to achieve this without interfering with Highcharts logic. On different support channels, we try to help with current bugs, docs and charts which are achievable with a config with options available in the API docs.

This custom feature would definitely fall outside of the default scope of support. So, if you'd like to dive deeper into this, I will be happy to guide you/give you tips, send you useful articles, but I will be unable to provide you with a ready-to-go solution.

If you'd like to try to develop this feature yourself, it might be worth looking into the Axis class, how it is created and how it is drawn (https://code.highcharts.com/stock/highstock.src.js look for 'class Axis') and override this logic.

Here's an article about overriding Highcharts logic which you may find helpful: https://www.highcharts.com/docs/extendi ... highcharts

Let me know if you have any questions.

Best regards!

---
PS. If you'd like Highcharts nativists to help you with your Highcharts project, feel free to check us out and contact us: https://blacklabel.net/highcharts/
Jakub
Highcharts Developer
JamesW
Posts: 37
Joined: Wed Feb 03, 2021 3:33 pm

Re: Columns not taking up full width of x-axis

Hi jakub

Thanks for the information, that may come in handy in the future.

It's at least good to know that I wasn't going mad or just missing something obvious.

I think we would leave it currently as have found a workaround.

We also display a line series on the chart at the same time as the column and give the user the option to hide both if they wish.
When the line chart is visible the columns fit the x-axis width perfectly and is how we want it, if they set visible: false on the line series then the columns start to go wrong for us.

So rather than set visible: false on the series, we set the opacity: 0 on the line series or the colour: 'transparent' on columns, that way the x-axis and navigator work as we wish and you can still hide each of the series types.

Thanks
J.
jakub.s
Posts: 1218
Joined: Fri Dec 16, 2022 11:45 am

Re: Columns not taking up full width of x-axis

Hi,

Absolutely, you're not going mad :) it's just not that easy to achieve without overriding the core logic of Highcharts which might be complex and problematic.

Setting opacity to 0 is definitely a good workaround to this problem.

I'll be here if you need any guidance and if you have any more Highcharts-related questions. Wish you good luck with your project!

Best regards!
Jakub
Highcharts Developer

Return to “Highcharts Stock”