plotBand in Highstock - data from Google sheet

[arg02]

Hello,
I want to set an x-axis plotBand between 2021-04-17 18:00 to 2021-04-17 19:00 on this data which is coming from a Google sheet. The data points are every 15 mins.

With pointStart set, a grey plotBand appears - without it, it disappears so it seems its needed but I'm not sure why.

But even with it there, the plotBand is not respecting the minutes. Is it because Highstock needs datatime in unix format and its not coming from this Google sheet?

https://jsfiddle.net/arg02/8mw2xhL1/53/

This is the google sheet https://docs.google.com/spreadsheets/d/ ... edit#gid=0

[pawelys]

Hello, welcome to the official highcharts forum, and thanks for contacting us with your question!
The reason that the plotBand doesn't display correctly is that highcharts doesn't parse the date provided by the spreadsheet correctly (or even at all). It assumes, that you provided the string, that is describing the category, and that the interval between the points is equal to 1 (which is 1 millisecond in js timestamp). This is why on navigator you can see the values regarding the first point (1970, 1, 1, 0, 0, 0, 1 if the pointStart isn't provided) It would treat the same string 'Apple' or 'Africa'. What you should do, is define the callback function, that will parse the date. There are multiple ways of doing it, but the easiest is the parseDate (which is exactly what you need). Check the following example, where I parse each date, which is later used as the correct value.

https://jsfiddle.net/BlackLabel/hcbsy1d9/

API reference: https://api.highcharts.com/highcharts/data.parseDate
https://developer.mozilla.org/pl/docs/W ... Date/parse

Let me know if that works for you, and in case of any further questions feel free to contact us again! Kind regards,

[arg02]

Hi Pawel.
Many thanks for your reply.
I suspected that might be the cause.
In your example there, the date in the top right of the navigator is still showing as Jan 1, 1970 > Jan 1, 1970
And the console is showing NaN for the result of the console.log(Date.parse('2021-04-17 21:0:0'))
Is there something else required in the example?
Thanks,
Andrew

[arg02]

Actually, it's something to do with Safari.
Your example works in Chrome but doesn't in Safari.
In fact my original example works in Chrome but doesn't in Safari.
Must be something to do with the way Safari parses DateTime (or rather doesn't).
I guess I should raise a bug report.

[pawelys]

Hi! As you mentioned, this probably is the issue with Date.prase not working the same way on different browsers, so this is not the issue with highcharts. I hope, you meant to report the bug for safari, not for highcharts, because the highcharts library works correctly in this case. Unfortunately, the issue here is beyond the scope of this forum, so you should look for help in the more general forum, like Stack overflow. Kind regards,