drfraenk
Posts: 2
Joined: Fri Sep 22, 2023 7:49 pm

Highcharts horizontal scrolling bug with datetime type

Hi Folks,

I have a highcharts chart in place using v11.
There are two series in two panes: candlestick on the upper / column with volumes on the lower pane.

I want to display the full day, so I've been using datetime type for the x series and defined a tick interval with 5 minutes. So far so good, everything is working appropriate except the scrolling behavior:

Once I scroll outside of the area where I actually have data and come back in, there is that weird sticky behavior
Mouse wheel scrolling is not working
Panning is not working (as it's outside of the data area)

Buggy Fiddle: https://jsfiddle.net/8g745vxr/0/

It is working appropriately if I have data for each time point (with null values for the yAxis).
But I guess that's not what the datetime type for the xAxis was added for -> having a timerange without adding data points for each time:

Working, null datapoints Fiddle: https://jsfiddle.net/8g745vxr/1/
(see JS line 45/46)

So is there a way to achieve this behavior without having data for each datapoint on the xAxis like on the 2nd fiddle? Really appreciate any help!
jakub.j
Posts: 1084
Joined: Tue Jan 24, 2023 11:14 am

Re: Highcharts horizontal scrolling bug with datetime type

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

Your issue is already reported on our GH: https://github.com/highcharts/highcharts/issues/19475.
Our team is already working on it, it should be ready soon.

For now, the best workaround is exactly what you did - to add dummy points with null values at the extremes.

​If you have further inquiries, you may reach out to me at any time.
Best regards
Jakub
Jakub
Highcharts Developer
Marwin
Posts: 1
Joined: Tue Sep 26, 2023 6:04 am
Contact: Website

Re: Highcharts horizontal scrolling bug with datetime type

Hi,

To address the issue with your Highcharts chart, you can achieve the desired behavior without having data for each data point on the xAxis by using the min and max properties of the xAxis to set the range you want to display. Here's an example of how you can do it:

Code: Select all


xAxis: {
  type: 'datetime',
  min: Date.UTC(2023, 8, 20, 9, 0), // Set your desired start date and time
  max: Date.UTC(2023, 8, 20, 16, 0), // Set your desired end date and time
  tickInterval: 5 * 60 * 1000, // 5 minutes interval
  // Other xAxis configurations
},
This way, you can specify the range of time you want to display on the xAxis without the need for data points for each time point. This should help resolve the scrolling and panning issues you mentioned.

Here's an updated fiddle with this approach: Updated Fiddle

I hope this helps!
drfraenk
Posts: 2
Joined: Fri Sep 22, 2023 7:49 pm

Re: Highcharts horizontal scrolling bug with datetime type

Hi Jakup.J, thanks for reaching out - appreciate this being fixed asap!

Hi Marwin, thanks for you feedback, but that is exactly what I did in my fiddle. Please check out Jakub.Js post, seems like this is an already reported issue

Return to “Highcharts Stock”