Scrolling chart on mobile devices about highcharts

[bm64]

@gruuschesdevelopmenthq I'd suggest checking this issue. Once we've got a fix, it'll be linked here and the issue will be closed. Then the fix will be available immediately on the master branch or with the next release of Highcharts. Since it's a regression, the issue is prioritized.
If you're using our CDN, you can use Highcharts GitHub File Service to get the latest fixes as soon as they're merged, for example: https://github.highcharts.com/highstock.src.js. If you're using a package, you will most likely have to wait for next release and in this case checking the changelog should be helpful.

[hubertkozik]

Here's the demo, where panning with one finger does not work: https://jsfiddle.net/BlackLabel/shqxm62w/show

Video below - all of touches are single touch. First click the navigator, change the extremes -> single touch panning does not work, you can see tooltip for few miliseconds.

RPReplay_Final1714996736.2.mov

[pawelfus]

Yes, the issue should be fixed on the master branch. You can test it locally by using this build: https://github.highcharts.com/e7e0d4107c41d78fc1890c827ab874c81d5b4422/stock/highstock.js

[bm64]

Hello @ETMTrader

Are you sure you're using v11.4.0? Indeed mobile panning / zooming used to work like that, but since v11.4.0 it was improved (#20077) and works smoothly on my end now, in the provided demo too.

[ETMTrader]

Hi

Sorry, it's really version 11.3.0
Our developer has not updated the version.

We've now updated the version
But, there are some issues that we noticed while testing on mobile devices.

You can't make a smooth swipe with one finger. Smooth scrolling is possible only with two fingers.

Zoom with two fingers works well. But chart swipe with one finger.
Perhaps it is customizable somewhere. I have not found.

The right side of the chart does not allow to make a normal swipe. In the video I attached you can see that the mouse does not work on the right side. The behavior of the chart in the mobile version of the browser and on a mobile device is the same.

If we apply tools, they work as in the video. Dragging the tool should not move the chart itself.
https://drive.google.com/file/d/1hdAVTJND6jsFEe0ca8RRmlpwizdDHICw/view

My code

let chart_option = { global: { useUTC: false }, time: { timezoneOffset: new Date().getTimezoneOffset() }, chart: { events: { load: function() { series = this.series[0]; if (series.data.length > 0) { this.lastPointIndex = series.data[series.data.length-1].index; } } } }, xAxis: { ordinal: true, overscroll: 40000 }, yAxis: [ { height: '80%', lineWidth: 1, resize: { lineWidth: 1 }, labels: { align: 'left' }, offset: 0 }, { top: '80%', height: '20%', lineWidth: 1, labels: { align: 'left' }, offset: 0 } ], plotOptions: { candlestick: { states: { hover: false, } }, series: { dataGrouping: { enabled: false }, states: { inactive: { opacity: 1 } }, } }, series: [{ id: 'price', type: 'candlestick', name: 'Price', turboThreshold: Number.MAX_VALUE, data: ohlc, tooltip: { valueDecimals: 2 }, lastPrice: { enabled: true, label: { enabled: true } } }, { id: 'volume', type: 'column', name: 'Volume', data: volume, turboThreshold: Number.MAX_VALUE, yAxis: 1, opacity: 0.6, enableMouseTracking: false }], navigation: { annotationsOptions: { shapeOptions: { strokeWidth: 2, } }, bindingsClassName: 'tools-container' }, stockTools: { gui: { enabled: true } }, tooltip: { followTouchMove: false, enabled: false }, scrollbar: { enabled: false }, rangeSelector: { inputEnabled: false, enabled: false }, responsive: { rules: [{ condition: { maxWidth: 800 }, }] }, navigator: { enabled: false }, accessibility: { enabled: false } }

[bm64]

Hi @ETMTrader

As you can read in API docs, to enable single finger panning, you need to disable followTouchMove option: https://api.highcharts.com/highstock/tooltip.followTouchMove, but it seems like you did that already in your config.

If that doesn't help, then perhaps there are too many points that capture touch event, making it impossible to pan. There are two things that you might want to try:

1. Enable back dataGrouping to reduce number of points on zoomed chart
2. set enableMouseTracking to false to prevent series from capturing touch events

Please try this demo and let me know if it helps: https://jsfiddle.net/BlackLabel/evjgtkab/show

When it comes to dragging annotations - I wasn't able to recreate the issue on my end. Please let mw know if the issue occurs in provided demo.

[ETMTrader]

Hi @bm64

I watched your demo.

1 - same problem with one finger
2 - when you swipe with two fingers in the video you can see that the bars are smaller when you zoom in

first video
https://drive.google.com/file/d/1Yn6Nfnu1xPg2ka2G6D8RrBsvz8486_it/view?usp=sharing

The moments when the chart does not move I do a one finger swipe. It works the same way only on the left side. In some moments swipe with one finger does not work at all!

Two finger swipe and zoom work, but at some point of zoom the number of bars on the screen gets bigger.

Exactly the same chart work is observed on the PC
https://drive.google.com/file/d/15GOht6HvWbPxI1Qch4KzPXvLnqm_IfLB/view?usp=sharing

[bm64]

@ETMTrader I was able to recreate the issue with not being able to pan from the right side of the chart. Thanks for the explanation! Unfortunately, as for now I can't provide workaround for that issue.

When it comes to changing number of bars when zooming - this behaviour is an effect of data grouping, and can be disabled with dataGrouping.enabled: false property. You can read more about this feature here: https://www.highcharts.com/docs/stock/data-grouping

Bisected to: 023ba48

[gruuschesdevelopmenthq]

Hi @bm64 ,
just a general question how issues are usually handled in Highcharts. Will we be informed automatically in this issue when it has been resolved in a new version or should we watch out for changelogs when a new version comes out?

[MuhammedHarisMKS]

+1

Same issue here

Works fine with 2 fingertips scrolling. But with one finger not working.

[TorsteinHonsi]

@bm64 I did a little investigation and created this minimal reproduction: https://jsfiddle.net/highcharts/od4vaj9q/ . In v11.2.0, this works, but is broken since.

Interestingly, when I set xAxis.ordinal to false (latest release), the touch-panning works, but not perfectly: https://jsfiddle.net/highcharts/od4vaj9q/1/. It pans only parts of the way, then locks. Mouse-panning is flawless.

More surprisingly, when I tried the same setup in pure Highcharts (without Stock), it seems that it never worked: https://jsfiddle.net/highcharts/rg63ds9e/ . Mouse-panning works as intended, touch does not.

[MuhammedHarisMKS]

@TorsteinHonsi I checked those changes. But I still have those problems. Sometimes it works fine with one finger. But sometimes not. I video recorded the matter. Please check the video

Screen_Recording_20240426_122114_Chart.mp4

[TorsteinHonsi]

@MuhammedHarisMKS Did you try out the changes from #21056?

Load https://github.highcharts.com/highcharts.js or https://github.highcharts.com/stock/highstock.js to test. PS: Don't use those in production, they're only for pre-release testing.

[MuhammedHarisMKS]

@TorsteinHonsi Yes, I used the link mentioned above. But the same problem still exists (as in the video).

[TorsteinHonsi]

@MuhammedHarisMKS It looks like the preview script was not properly updated. Can you try loading https://github.highcharts.com/3134b45/stock/highstock.js ?

You can try it out live at https://jsfiddle.net/highcharts/16c7zn0g/show . If you're still having problems with your setup, please change that fiddle and share it with us so that we can see the same as you.

[MuhammedHarisMKS]

@TorsteinHonsi Yes, I tried with https://github.highcharts.com/3134b45/stock/highstock.js this. This is better than others. But sometimes it still has that missing when dragging a single finger (as in the video shared above). This issue is only in large amount of data, with small amount of data its working fine. Could you please check that way? Also, when we change the data, then it's completely disabled the single finger dragging.

fiddle thing - I have no knowledge in this area. So, I can't help you with the fiddle.

[MuhammedHarisMKS]

@TorsteinHonsi Any update on this?

[TorsteinHonsi]

@MuhammedHarisMKS

fiddle thing - I have no knowledge in this area. So, I can't help you with the fiddle.

You'll figure it out, everyone does. Just enter your code, then click Save, and post the new URL here. Once we can replicate what you are experiencing, we can start debugging.

[MuhammedHarisMKS]

@TorsteinHonsi I will share a sample code snippet with you. Is there any possibility to check with that code snippet?

Sample.zip

Please check with this code snippet. Also please let me know if you need more information from my side.

NB: I tried to create a sample jsfiddle thing. But, when I try to add my sample data its shows some error. IDK why it happens,

Please use the following data sample for your test purpose,
SampleData.json

Ty :)

[MuhammedHarisMKS]

Is this issue fixed?

[MuhammedHarisMKS]

I tested it with our application (With large set of data). It works well. When can we expect it live?

[MuhammedHarisMKS]

@pawelfus
After using single finger changes (master branch changes you shared), pinch zoom doesn't work. Can you please check that area?

[pawelfus]

Thank you for pointing this out @MuhammedHarisMKS ! You are right, it is now broken. I tried to fix it, do you mind double-checking this? It's available here: https://github.highcharts.com/8478f37862d6d456abbee57e8f8b6c5922981ede/stock/highstock.js

[MuhammedHarisMKS]

@pawelfus I tried the new build. It works well.

When can we expect it live?

[pawelfus]

Great to hear that, thanks!
I expect a new release before the summer vacation, within a few weeks