Disable hover on Mobile / Tablet Devices

Dash Python
1

Hi,

Is there any way to disable the hover in the graphs on mobiles and tablets devices?

Thanks!

2

Hi @dmedina,

If you’re using plotly.offline.plot you can use the staticPlot config option to disable all interactivity. E.g.

from plotly.offline import plot

plot({'data': [{'y': [2, 1, 3]}]},
     config={'staticPlot': True})

Hope that helps,
-Jon

3

Thanks @jmmease! That works!

But, does anyone knows how to do it in Dash?

Thanks!

4

Just add config as the 3rd dictionary argument to your figure. So it would be data, layout, config.

    dcc.Graph(
        ....
        config={'staticPlot': True}
    )
5

Here’s a dash recipe you can reference as well with a whole bunch more useful options:

1 Like
6

Thank @mbkupfer! That disables the hover of the graphs in all devices. But the problem is when I use a computer, because the hover is also disabled.

The details of my problem are: I want to disable the hover property in touchable devices because the graphs are adjusted to the whole screen, and when you want to scroll and you touch over a graph, the scrolling does not work because of the hover property of the graphs. So, I do not know how to fix it. Maybe I can fix it with Dash or I can fix it with CSS or I can not fix it.

Thanks!

7

Theoretically, this should be possible. I’m thinking of one solution which would be a combination of javascript and dash-callbacks:

1. Javascript

Using window.matchMedia, you can create query notifications for different media changes.

In not so eloquent javascript, this would equate to something like:

var container = document.querySelector('#container')
var mediaQueryList = window.matchMedia("(max-width: 400px)")

function handleOrientationChange(mql) {
  container.className = 'small-screen'
 //changing the classname should theoretically trigger a callback, but I couldn't get it to trigger
}
mediaQueryList.addListener(handleOrientationChange);

2. Dash

If the above ends up working, then we can trigger a callback whenever the class is changed as such:

# component declaration in app.layout
dcc.Graph(
        id='my-graph',
        figure={...},
        config={'staticPlot': True}
    )

# callback
@app.callback(Output('my-graph', 'config'),
    [Input('container', 'className')])
def change_plot_config(cls):
    return {'config': {'staticPlot': False}}

There are just two issues that I’m running into here.

Issues

  • First issue is that the the className change does not trigger any callback. I know this because even when I manually changed the classname in the console, nothing got triggered.

  • Second issue is that the config attribute of the dcc.Graph will not update. Even when I force the callback to be triggered.

@chriddyp and @nedned you are the dash experts. Do you have any ideas as to what’s going on here?

1 Like
8

Thanks a lot @mbkupfer! It was helpful.

Finally I did a “tricky” solution just using CSS. I am sure it is not the best way but at least it works.

I found out that the html elements with hover properties has the name: .cursor-pointer, so I added CSS property pointer-events: none !important; to that class when it is a touchable device. At the moment I do not realize any problem using that, if I find any I will notify it.

Thanks!!!

9

Ooh, very clever! :clap: