Highcharts: Panning on touch devices doesn't move the axis and data

[fapaul]

When panning on touch screens devices I expected to see a moving axis and data.

Actually I see a not moving static axis until touchEnd Event and white Space instead of data

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/pankey/

On touch and non-touch devices I use Chrome.

[TorsteinHonsi]

Thanks for writing! The axis behaviour is by design. Some processing power is required to compute the axis layout and place tick marks, labels etc. So in order to get a smooth panning experience on touch devices we just translate the actual series data (line graph, columns etc.) in order to give the user feedback on the panning, but we we don't do the full translation until it is dropped.

When you say "white space instead of data", what do you mean? You are supposed to see the graph itself and the markers moving. That is what I see in iPhone 6.

[fapaul]

The touch device I use is big touch screen connected to a normal PC, so is it possbile to disable this translation?

I hope the following image descibes the problem. This is what I get before releasing the touch. Don't mind the red bar.

[TorsteinHonsi]

Oh, I see, it's the graph that is clipped outside the "current" zoomed area. For one single finger pan it should be possible to work around it by emulating the same behaviour as mouse-pan, but for two-finger pinch/zoom it is different altogether...

[fapaul]

Ok, thanks for your fast reply. In my case it would only be necessary to translate single-finger pan as I don't need pinch and zoom moves.

Do you have any idea on how I can achieve this translation, maybe catching it in highcharts itself? (I also tried translating touch events on the object, but then there was no panning at all)

[axlerk]

+1.

Sebastian Bochan form Helpdesk wrote I have the same trouble as you have.

I use Hightstock and my charts redraw only on touchEnd.
Example: http://jsfiddle.net/z4zmthkj/3/
Video: 2017-04-04 18-44-03.MOV.zip

But in Highcharts chart redraw "live" every second when I moving my finger:
Example: http://jsfiddle.net/z4zmthkj/2/

iPhone SE, Android 5. Highstock 5.0.9.

[axlerk]

@sebastianbochan, can you write your opinion about this bug in highstock?

[sebastianbochan]

Only what I can add is that I was able to replicate it on Android 6.0 and iOS.

[Kinka]

Same problem here. Cannot find an option to do this, I wanna drag the graph on touch devices as it performs on the PC browsers. Checking out source code of highstock, finding out touch devices do not react to drag/dragStart events like PC do. So that navigator or scrollbar scrolls the chart smoothly on touch devices, dragging(or one-finger panning) should too.

[TorsteinHonsi]

I experimented a little with this and it seems like we can quite easily replace the pointer.pinch call with chart.pan, with a few optimizations. This is something we could incorporate in the API. Right now there is a problem with panning outside the axis though:

http://jsfiddle.net/highcharts/j8kq6gxc/

[Kinka]

@TorsteinHonsi Thank you so much. Your code enlightens so much, and works like a charm.

[ourabio]

@TorsteinHonsi I used your solution and it did make the scroll better but not great, sometimes it works just fine and sometimes it freezes or scroll not for long.
Check these videos:

• before adding your solution:

Navigator disabled: https://streamable.com/5hzic
Navigator enabled: https://streamable.com/xgtht

• After adding your solution:
  https://streamable.com/peb33
  Any suggestions? Thanks!

[pawelfus]

Hi @ourabio

Thanks for the details! Could you recreate issue in jsFiddle? We will take a look. Demo posted by @TorsteinHonsi works without problems you have in your videos.

[ourabio]

Hey @pawelfus

I am sorry for the late response! I couldn't recreate the issue in jsFiddle, I suppose the problem is related to touch devices webView. I did found what is causing the issue but I didn't get to a solution to fix it so I hope that you can help! when I scroll out of the chart points it works fine but when I scroll on the chart points it is not working so I am guessing an event related to the chart is blocking the scroll. Check the video:
https://streamable.com/m04yw
PS: in my configs plotOptions.column.enableMouseTracking = false to disable data click and show tooltips programatically. Thanks!

[pawelfus]

Hi @ourabio

Thank you for the details. Sorry, but nothing comes to my mind in your case. Maybe you have some errors in JS console that is causing this issue?

[ourabio]

@pawelfus I checked JS console but no errors , Thanks for your help!

[ourabio]

I logged the event object on the pinch wrap and the only difference is the target element so as I already said it is working when the target is background and not when it is point. Is there a way to make the points completely invisible to any click / touch event or to forward the target from point to background ? Thanks!

[pawelfus]

Yes, you can @ourabio - try .highcharts-point { pointer-events: none; } in CSS.

[ourabio]

@pawelfus works like charm. Thanks for your support!

[oloflandahl]

The solution (https://github.com/highcharts/highcharts/issues/5270#issuecomment-342767958) works fine for one finger panning. How about two finger panning? I use one finger drag for tooltip.

[geesoon]

I experimented a little with this and it seems like we can quite easily replace the pointer.pinch call with chart.pan, with a few optimizations. This is something we could incorporate in the API. Right now there is a problem with panning outside the axis though:

http://jsfiddle.net/highcharts/j8kq6gxc/

I am new to Highchart! Thank you for the awesome code! I am using it for highchart but now it can only pan x axis. I have set my pinchType to 'xy'. Any idea how to make it pan xy?

[PaulDalek]

Hi @geesoon

Thank you for contacting us. This is a support question, so please next time consider contacting us via one of the available support channels. As for the answer, you need to set the panning.type to 'xy'. Also, having set the followTouchMove to false while having zooming on will enable one-finger panning.

Demo
http://jsfiddle.net/BlackLabel/ec6qofau/

[geesoon]

Thanks! @PaulDalek I managed to make it pan xy but it is currently affecting the pan experience since the function is called every time a touch event occured that includes the process of panning. The overall panning become laggy. Is there any optimization that can be done? Else I will need to accept the axis and data not moving. =(

[PaulDalek]

@geesoon

The issue is still open so at the moment there is no optimal solution for this other than the workaround provided some time ago.