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

Chart columns datetime x-axis issues

I need to have a chart with a datetime x-axis that will display a column series and eventually a line series at the same time.
I was having issues getting the columns to fit correctly along the x-axis, with the widths not fitting correctly.
I am attempting to calculate the width myself to get the columns to display correctly.
I have setup an demo of my issue here:
https://codesandbox.io/s/highcharts-col ... xample.tsx
The columns should have no gaps and fit along x-axis, the demo shows months so the columns need to be slightly different widths to allow for months with different no days.
Each point on the chart has a start and end date in the data so I use these to calculate the column width:

Code: Select all

const pxStart = axis.toPixels(from.toMillis(), false);
const pxEnd = axis.toPixels(to.toMillis(), false);
const width = pxEnd - pxStart;
I would have thought the above would make each column the correct width, but there are some slight problems with it.
I would like the columns to be displayed in between the ticks.
Does anyone have any ideas as to what the issue might be?
Thanks for any help.
J.
jakub.s
Posts: 1225
Joined: Fri Dec 16, 2022 11:45 am

Re: Chart columns datetime x-axis issues

Hi James,

Thanks for the question!

I've simplifed your demo so that it's easier for us to work on: https://jsfiddle.net/BlackLabel/yjehL92p/

As you can see, there is a clear overlap between two of those columns.

However, I'm not sure how you would want to avoid this. If you open up the console you'll see that the x difference between the consecutive columns is different for each pair. Naturally, the distances between the columns cannot be the same in this case.

If the difference between the x values of each column is constant then you will have columns which do not overlap: https://jsfiddle.net/BlackLabel/t46f2hLe/

Could you please explain what is it that you're trying to achieve and what do you think is wrong in your demo?

Then I'll be happy to dive deeper and offer some kind of solution for you.

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

Re: Chart columns datetime x-axis issues

Hi Jakub
So I would want to achieve something similar to below, where the columns cover the date range they represent, so it could be a month, a year or a quarter, and I don't mind that they may be different widths, as they would be if they covered a month as some months have 28 days, some 31. and there is always just the 1 pixel border separating the columns.
Also for the columns to be in-between the ticks as below but I think that is just achieved using the pointPlacement option.
Screenshot 2023-08-14 at 15.16.02.png
Screenshot 2023-08-14 at 15.16.02.png (12.15 KiB) Viewed 350 times
I would have thought that if on a datetime axis, (and columns represent months) I could work out the width of each column by getting the start and end of each month, getting the pixel value of each and then if I iterate over each point I can calculate the width of each column:

Code: Select all

const pxStart = axis.toPixels(from.toMillis(), false);
const pxEnd = axis.toPixels(to.toMillis(), false);
const width = pxEnd - pxStart;
p.update({ pointWidth: width }, false);
Does that make sense?
I have spotted one issue though, which is the x-axis ticks are all 1 hour ahead of my data points, which may have something to do with the clock changes, but not sure how to fix this yet either.
JamesW
Posts: 37
Joined: Wed Feb 03, 2021 3:33 pm

Re: Chart columns datetime x-axis issues

I've created another demo, this time using the 'ordinal' option on the x-axis.

https://codesandbox.io/s/highcharts-col ... xample.tsx

This seems to be what I want, which I had used initially but had quite a few problems with the navigator when updating the range or navigating, so I started to try and calculate the column widths myself.

It seems to work ok currently without any of my range/navigation controls added in so maybe I had an underlying issue with one of those that was causing problems before.

Although still have the problem with the x-axis dates not matching up with my data points (being 1 hour out), any ideas on that?

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

Re: Chart columns datetime x-axis issues

Sorry to keep to keep messaging!

I've updated that last demo again and added in my line data & series, but now it spaces out the line data so it doesn't look correct, I think this will be because I have the 'ordinal' set to true on the x-axis, is there a way around this?

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

Re: Chart columns datetime x-axis issues

A little update.

The previous demo was not correct, as the ordinal setting would obviously space out the point for the line series evenly, which is not what I want as there could be many line series points within the range of each column.

So this is the same as the previous demo with 'ordinal' set to false, which seems to be how I want it apart from the columns not taking up the full width of the space/tick.

https://codesandbox.io/s/highcharts-col ... xample.tsx

So is there a way I can achieve this? I've been attempting it by calculating the width of the columns myself but it doesn't seem to work as I was expecting.

The object/data I have in each point is:

Code: Select all

{
x: 1659308400000,
y: 42.877831165375405,
usageCalc: {
fromDate: "2022-07-31T23:00:00.000Z",
toDate: "2022-08-31T23:00:00.000Z",
days: 31,
}
}
So I was using the 'from' (from would be the same as x) and 'to' date to calculate the width in pixels.

Am I able to achieve it this way or is there another way I could do it easier/better?

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

Re: Chart columns datetime x-axis issues

Hi James,

Thanks for explaining!

---
1. I've added the line series but now it spaces out the line data so it doesn't look correct (ordinal)

As you can read in the API (https://api.highcharts.com/highstock/xAxis.ordinal):
ordinal: In an ordinal axis, the points are equally spaced in the chart regardless of the actual time or x distance between them. This means that missing data periods will not take up space in the chart.

That's why adding the second series (the spline series) introduced these gaps between columns (because we added some points to the x values which had previously been "not occupied").

A simple solution to this problem would be to add another axis (one would be for the column series and the second one would be for the spline series).

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


---
2. Updating the pointWidth
const pxStart = axis.toPixels(from.toMillis(), false);
const pxEnd = axis.toPixels(to.toMillis(), false);
const width = pxEnd - pxStart;
p.update({ pointWidth: width }, false);

I like this! I think it should work.

Personally, I'd do it similarly.

1. I would set a certain start and end values on columns, which would be the range for those columns
2. I would then update the point width of each column based on the pixel difference between end and start
3. I would then move the column (translate x position) so that the left edge of the column is on the start pixel position (you can also achieve this through pointPlacement as you did in your example).

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

If you apply this approach, I don't see any reason why it would not work if you have proper start and end values.

However, there might be some issues when the xAxis.ordinal is applied. This approach would definitely work with ordinal turned off, but I'm not so sure about a scenario with the ordinal turned on.

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

If you comment out the line with ordinal: false you'll notice multiple issues. This does not work anymore.

There are multiple reasons for it, most of them stem from the behavior of the ordinal axis.

Unfortunately, there's no simple workaround for this. An alternative solution could be to create multiple x-axes, each with ordinal set to false, positioned next to each other (so they look like one xAxis) and then apply this method of updating points' width.

Please let me know if that's an option that you would like to explore further. I'll be happy to send you a demo showing how this can be done.

Do not hesitate to ask if anything was unclear or if you have any more questions.

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

Re: Chart columns datetime x-axis issues

Thanks for the reply.

I don't want to use ordinal, that was just the only way I could get the columns to be the correct width and I realise it won't work correctly when introducing the line series data, so will rule that out.

I will give it a go as per your example https://jsfiddle.net/BlackLabel/4hgv0tzw/ and see how I get on, I may be back in touch though.

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

Re: Chart columns datetime x-axis issues

Hi Jakub
That seems to have sorted the columns, with the initial width calculation, I just need to get it to re-calculate using the afterSetExtremes event.
Screenshot 2023-08-15 at 11.37.57.png
Screenshot 2023-08-15 at 11.37.57.png (161.59 KiB) Viewed 333 times
https://codesandbox.io/s/highcharts-col ... xample.tsx

Although I also need to do the same to calculate the navigator series column also.

But definitely feels like we're getting there.
jakub.s
Posts: 1225
Joined: Fri Dec 16, 2022 11:45 am

Re: Chart columns datetime x-axis issues

Hi,

Absolutely, you're right.

Fortunately, only a small change is required - changing the chart.events.load to chart.events.render which will get triggered not only after the initial render of the chart, but also after each consecutive one.

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

Let me know if that solved the problem with afterSetExtremes.

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

Re: Chart columns datetime x-axis issues

Hi jakub

I've built a version of my chart here: https://jsfiddle.net/jameswilkinson_77/5qpmvae0/71/
Although it seems to be working as I would expect in there, so I'll have to go through my chart and try and find out where the issue is originating.
jakub.s
Posts: 1225
Joined: Fri Dec 16, 2022 11:45 am

Re: Chart columns datetime x-axis issues

Hi James,

Let's continue this thread here: viewtopic.php?p=191720#p191720

Regards!
Jakub
Highcharts Developer

Return to “Highcharts Usage”