Hide modebar in plotly Dash

Question

In our Dash chart, we're trying to hide the floating toolbar, which allows the user to zoom, pan, save, capture etc. To achieve that I know that in plotly you can set the displayModeBar param to false. How can this be done in Dash?

Answer 1

The Dash Core has been updated and it now offer a cleaner solution. A specific config parameter with a value 'displayModeBar': False has been introduced

From Plotly forum

dcc.Graph(
    id='my-graph',
    figure={'data': [{'x': [1, 2, 3]}]},
    config={
        'displayModeBar': False
    }
)

The config parameter let you even to hide and remove specific buttons.

For example:

config={
        'modeBarButtonsToRemove': ['pan2d', 'lasso2d']
    }

Note that to make it work you have to update all Dash components.

In my configuration (pip and virtualenv) the following commands were necessary:

pip install dash --upgrade
pip install dash-core-components --upgrade
pip install dash-html-components --upgrade
pip install dash-renderer --upgrade

Answer 2

Indeed the forum helped solved this issue. For completeness I'm posting the answer here:

Create a my.css file under the static folder in Flask, with:

.modebar { display: none !important; }

And then:

my_css_url = "/static/my.css"  
app.css.append_css(
    { “external_url”: my_css_url }
)