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.