✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Disable hover on Mobile / Tablet Devices

Hi,

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

Thanks!

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

Thanks @jmmease! That works!

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

Thanks!

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

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

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

1 Like

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!

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

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!!!

Ooh, very clever! :clap: