Plotly on Mobile - page scrolling

maverick-2 commented 6 years ago

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 commented 6 years ago

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 https://github.com/plotly/plotly.js/issues/2371

etpinard commented 6 years ago

Or perhaps, you're referring to 3D or/and geo subplots that indeed have no way to disable zoom at the moment, ref https://github.com/plotly/plotly.js/issues/143

maverick-2 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

@maverick-2 did https://github.com/plotly/plotly.js/issues/2844#issuecomment-408425623 solve your issue? Would it be ok if we closed this ticket? Thank you.

maverick-2 commented 6 years ago

É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 commented 6 years ago

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 commented 6 years ago

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 - https://github.com/plotly/plotly.js/issues/1858).

kris7ian commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

@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 commented 5 years ago

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

Starting from v1.43.0 it works as supposed.

archmoj commented 4 years ago

@maverick-2 is this still an issue?

jackparmer commented 4 years ago

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 commented 2 years ago

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 commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

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?

plotly / plotly.js

Plotly on Mobile - page scrolling #2844