Touch scroll on mobile devices

[maxmar123]

Hello,

I researched about this feature and back then it wasn't implemented.
Since I didn't find anything newer, I wanted to ask if horizontal scrolling on touch devices is possible today?

What I mean is, when you have a stock chart on your mobile device (or any touch screen) and put on finger on the chart, you can move the daterange left/right by doing so with the finger. Just like it's done on tradingview and others.

It's working on the scrollbar that is underneath the chart perfectly fine. The same action should be possible on the chart itself.

Thank you and BR

[michal.f]

Hello,

The chart offers such a scrollbar, all you have to do is set the chart.scrollablePlotArea.minWidth property to the width from which the scroll should appear.

Demo: https://jsfiddle.net/BlackLabel/o5bmepdu/
API: https://api.highcharts.com/highcharts/c ... lePlotArea

Best regards!

[maxmar123]

Hello,

The chart offers such a scrollbar, all you have to do is set the chart.scrollablePlotArea.minWidth property to the width from which the scroll should appear.

Demo: https://jsfiddle.net/BlackLabel/o5bmepdu/
API: https://api.highcharts.com/highcharts/c ... lePlotArea

Best regards!

That's it! Great that it works!
Thank you

[michal.f]

That's great to hear! In case of any further questions, feel free to contact us again.

Best regards!

[maxmar123]

Unfortunately the behaviour of scrollablePlotArea is not that what I need. It's not sufficient for big touch screens like convertible notebooks because the minWidth parameter messes it up, especially with dynamic data and range selector activated.

So I noticed that scrolling on touch screens can be achieved with setting followTouchMove to false in tooltip. The scrolling itself is very nice but there is some really ugly thing. When scrolling on a touch screen, the chart line is moving out of the chart box. This doesn't happen with panning with a mouse.

Here's an example: https://jsfiddle.net/wn3h29b8/5/
Either open it with a touch device or activate developer options in your browser and simulate a touch device. In Firefox it's called "Responsive Design Mode" and then on the top in the middle you can enable or disable touch simulation.

In the example it isn't that noticeable because the chart is small but on a larger chart it really messes up UX.

Is this a bug or can this be prevented somehow?

BR

[michal.f]

Hello,

It looks like it's some kind of bug. I tried to debug it but with no result. I would suggest reporting this on the Highcharts repository on Github, you can do so via this link: https://github.com/highcharts/highchart ... new/choose

There you will get more information, you will be able to follow it and possibly get some workaround if possible.

Best regards!