Panning the stockChart doesn't work smoothly on mobile

[jszuminski]

Expected behaviour

Panning the stockChart on mobile should work smoothly as it does in web browser here: https://www.highcharts.com/demo/stock/cumulative-sum

Actual behaviour

Panning the stockChart on mobile doesn't work smoothly - instead of smooth panning, it loads in chunks, sometimes zooms in using a single finger pan.

Live demo with steps to reproduce

Try panning the chart on mobile:
https://jsfiddle.net/BlackLabel/jd7b9n2x/

Product version

Highcharts 10.3.3

Affected browser(s)

[bm64]

Thanks @jakubSzuminski for reporting the issue.

Zoom problem is caused by ordinal option and can be prevented by simply setting ordinal to false: https://jsfiddle.net/BlackLabel/evnf3pa9/

[et1983]

Same bug. Wanted to try highcharts on mobile devices, it does not work.

[TTMSE]

Hi.
This is a very good chart, but the problems on the mobile version interfere with the integration.
What is the priority of this bug?
It's just that we wanted to use the paid version, but we can't make sure it works on a mobile device, which is very important to us.

The mobile version of the chart according to our data is used in 50%.

[bm64]

Hello @TTMSE

There are two different issues mentioned in the ticket and I'm not sure to which you refer to:

1. Panning on mobile devices doesn't work smoothly
2. Sometimes chart zooms in during the mobile panning

Currently I can't suggest any workaround for the first one, but second one can be fixed by setting ordinal option to false: https://jsfiddle.net/BlackLabel/evnf3pa9/

[TTMSE]

Thanks for the reply.
The jsfiddle solution is not suitable for using the stock chart.

Just a stock chart that does not work on mobile devices is not suitable for work.

Your chart is very good and easy to integrate. But the impossibility of work on mobile versions does not allow to use it.

[pawelfus]

Let me prioritize the issue, and we will check it.

In the meantime, @TTMSE could you please test this solution? https://jsfiddle.net/BlackLabel/jd7b9n2x/6/ Simply copy&paste this snippet, before creating the first chart:

Highcharts.wrap(Highcharts.Pointer.prototype, 'pinch', function (proceed, e) {
	if (e.touches.length === 1 && e.type === 'touchmove') {
    	this.chart.pan(e, this.chart.options.panning);
    } else {
    	proceed.call(this, e);
        if (e.type === 'touchstart') {
           	this.chart.mouseDownX = this.pinchDown[0].chartX;
	    	this.chart.mouseDownY = this.pinchDown[0].chartY;
        }
    }
})

---

Internal note:
Related to: #5270

[TTMSE]

Hi, @pawelfus

Thanks for the solution.
The chart is now scrolling!

But the zoom doesn't work correctly. The chart breaks after the zoom.

[pawelfus]

Thanks! Regarding this:

But the zoom doesn't work correctly. The chart breaks after the zoom.

Could you describe the issue? I simply zoomed in and tried to scroll: works fine. Zoomed out and tried to scroll - again, no problems. Does it happen in the demo above, or in your app?

[kamil-musialowski]

Looks like the issue got fixed with the #19055.
I have also tested it on a real phone and it works fine.

Demo with code from the branch to check on mobile view in chrome dev tools: https://jsfiddle.net/BlackLabel/ygb1pf9z/show

Could you please confirm @pawelfus before we close it?

[pawelfus]

Confirmed, works fine, thank you!
Closing this issue.

[soeasyjx]

How did you finally solve this problem

Panning on mobile devices doesn't work smoothly？？

[soeasyjx]

Using the above method, in ios Settings in the translation is not smooth, very lag, data volume is only 365

[pawelfus]

Could you check if you use the latest version? It should be fixed. If that's not the case, please recreate the issue in jsFiddle, we will check this. Thank you!