Plotly on Mobile - page scrolling

[maverick-2]

Hi developers,
I have troubles scrolling a page with bar chart on mobile devices. The chart’s default behaviour is zooming. It makes page scrolling impossible, unless label area is used for that. This is not intuitive, and confusing for users.
Is there a way to switch off zooming behaviour, and enable normal scrolling instead. Other libraries do that, for example:
https://www.highcharts.com/

I understand that pinch/zoom and other mobile stuff is work in progress, but can you enable at least simple page scrolling??
Thank you!

[etpinard]

plotly.js disables scroll zoom by default, so I'm a little puzzled by this report.

Are you referring to graphs on plotly cloud's shareplot view (e.g. https://plot.ly/~etpinard/7609)?

Alternatively, this might be a side-effect of #2371

[etpinard]

Or perhaps, you're referring to 3D or/and geo subplots that indeed have no way to disable zoom at the moment, ref #143

[maverick-2]

Hi Étienne,

Thank you for prompt response.
I'm talking about a bar chart, like one of these:
https://plot.ly/javascript/bar-charts/

Is it possible to change scroll zoom settings dynamically? On mobile device I want to have scroll zoom enabled by default, and on desktop – disabled.

[etpinard]

You could use a package like https://www.npmjs.com/package/has-hover to determine if you're on desktop or mobile then

var hasHover = require('has-hover')

Plotly.newPlot(gd, [/**/], {/**/}, {
  scrollZoom: !hasHover
})

[etpinard]

@maverick-2 did #2844 (comment) solve your issue? Would it be ok if we closed this ticket? Thank you.

[maverick-2]

Étienne,

I set scrollZoom to true, then to false, but did not notice any change in behaviour.
https://codepen.io/Igor1812/pen/ajqrYL

When I swipe on the bar aria, the default behaviour of the chart is ZOOM, but I need the chart just to be scrollable together with the web page.
Should I use any specific version of Plotly?
I use plotly-latest.min.js

[kris7ian]

I think I have the same problem as @maverick-2 . The problem is when you use your finger to move up or down on the page (I think the word "scrolling" caused confusion here) and you touch a chart the chart will hijack the touch event and start to zoom instead of letting the user move up/down on the page.

@etpinard I tried your hasHover suggestion. To fix this, I put the following code into the layout

xaxis:{
     fixedrange: !hasHover
},
yaxis:{
    fixedrange: !hasHover
}

BUT the problem now is that when a user tries to move around on the page plotly still captures the touch event and you can't move around (although the zooming is gone). This is especially problematic when the chart fills most of the screen. There needs to be a differentiation between a simple touch and a hold-and-drag.

Any idea how to fix this?

EDIT:
To replicate this behavior you can visit https://plot.ly/javascript/line-and-scatter/ with an Android phone and try to move around the page and touch the charts.

[etpinard]

Thanks @chriggi for trying to clarify the issue!

From what I'm seeing (more precisely on https://plot.ly/javascript/line-and-scatter/ ), dragging up and down (good call not calling this motion a scroll) on the plot area (i.e. within the plot's axes) does try to mimic the desktop's zoombox, but dragging up and down outside the plot area moves the page up and down. In other words, plotly.js only "hijacks" touch events on the plot area. Can anyone confirm this?

On https://plot.ly/javascript/disable-zoom/#disabling-zoom-events-for-x-and-y-axis, @chriggi is correct, dragging up and down on the plot area does nothing, and arguably we shouldn't try to catch those "long" touch events when all axes are fixed.

As a workaround, I'll suggest making a fully static graph. For example, on https://plot.ly/javascript/configuration-options/#making-a-static-chart you should be able to move up and down the page by dragging up and down on the plot area.

Alternatively, we should perhaps consider adding a dragmode: false, making it easier to disable drag, while still keeping hover labels (which don't work at the moment on mobile by the way - #1858).

[kris7ian]

From what I'm seeing (more precisely on https://plot.ly/javascript/line-and-scatter/ ), dragging up and down (good call not calling this motion a scroll) on the plot area (i.e. within the plot's axes) does try to mimic the desktop's zoombox, but dragging up and down outside the plot area moves the page up and down. In other words, plotly.js only "hijacks" touch events on the plot area. Can anyone confirm this?

I can confirm this. To clarify: dragging on the axes moves the chart, dragging on the plot itself zooms and dragging outside moves the page (as expected).
Thanks for the workaround which is working for me, but something like dragmode:false would certainly be better.

[maverick-2]

Hi @etpinard,

21% of Internet traffic to our site is coming from mobile devices, so it is highly desirable to have mobile-friendly charts.
Thank you for clarifying the issue, I will try to use static charts for the time being.
Something like dragmode:false would be definitely heaps better.

[vitexikora]

That'd be great! Can you tell, when will it be implemented? We have to calculate, whether its cheaper to wait or rollback to ancient plotly 1.17

[Kaltersand]

As a workaround, I'll suggest making a fully static graph. For example, on https://plot.ly/javascript/configuration-options/#making-a-static-chart you should be able to move up and down the page by dragging up and down on the plot area.

Is the option staticPlot available on Python too? I was trying with e.g.

plot({'data': data, 'layout': layout}, static_plot=True, show_link=False, include_plotlyjs=False, output_type='div'))

but it seems that neither the keywords (static_plot, staticplot, staticPlot) is not known.

[Kaltersand]

@etpinard
Up to https://cdn.plot.ly/plotly-1.24.2.min.js, dragging up and down on mobile works. Hover labels are shown too.
Nevertheless, I also would like to switch to a newer version (plotly-1.39.4.min.js) as it copes better with large legends. Looking froward to an update that allows to set the drag mode.

[Kaltersand]

Thank you for integrating the option "dragmode" in the layout.

Starting from v1.43.0 it works as supposed.

[archmoj]

@maverick-2 is this still an issue?

[jackparmer]

This issue has been tagged with NEEDS SPON$OR

A community PR for this feature would certainly be welcome, but our experience is deeper features like this are difficult to complete without the Plotly maintainers leading the effort.

Sponsorship range: $5k-$10k

What Sponsorship includes:

• Completion of this feature to the Sponsor's satisfaction, in a manner coherent with the rest of the Plotly.js library and API
• Tests for this feature
• Long-term support (continued support of this feature in the latest version of Plotly.js)
• Documentation at plotly.com/javascript
• Possibility of integrating this feature with Plotly Graphing Libraries (Python, R, F#, Julia, MATLAB, etc)
• Possibility of integrating this feature with Dash
• Feature announcement on community.plotly.com with shout out to Sponsor (or can remain anonymous)
• Gratification of advancing the world's most downloaded, interactive scientific graphing libraries (>50M downloads across supported languages)

Please include the link to this issue when contacting us to discuss.

[janvv]

This thread really helped me. I ran into the same issue and dragmode=False allowed correct webpage scrolling.

However, when using this flag, clicking on a scatter plot item to show the annotation results in a short highlight (light shade) of the overall graph. This visual highlight of the graphs rectangle is pretty disturbing.

Any suggestions how to avoid this?

[thisistonydang]

This thread really helped me. I ran into the same issue and dragmode=False allowed correct webpage scrolling.

However, when using this flag, clicking on a scatter plot item to show the annotation results in a short highlight (light shade) of the overall graph. This visual highlight of the graphs rectangle is pretty disturbing.

Any suggestions how to avoid this?

@janvv Did you ever find a solution to the highlight issue you mentioned? I'm running into the same problem after setting dragmode to false.

[thisistonydang]

@janvv I found a hacky solution-

It seems the flash of highlight occurs because there is a .cursor-pointer { cursor: pointer; } class set on the svg elements by Plotly. By changing the cursor to something else (e.g. .cursor-pointer { cursor: crosshair !important; }) in my global CSS stylesheet, I was able to prevent the flashing highlight.

[MHBalsmeier]

I've had the same problem and I noticed that dragmode: false enables vertically dragging on a mobile device, but when trying to drag horizontally, it still does not work. Is this a bug or is there a way to make horizontal dragging also possible?