Hide the floating toolbar from a plot component

Anvil Q&A
1

What I’m trying to do:
Hello Forum,
One of the components in the main form of my app displays a plot created with the plotly express library. As a default setting, plotly express plots display a floating toolbar that appears when hovering over the plot (Sample below). I’m trying to hide this floating toolbar from the plot displayed in the app.

image
image860×469 41.9 KB

What I’ve tried and what’s not working:

  • After reasearching online, I found that for plotly express one can hide this floating toolbar with the .show() method using the config option as in : “.show(config= dict(displayModeBar = False))”

  • Tried this Jupyter and works perfectly. The problem that i’m having is that the show () method seems to be the only way of hiding this floating toolbar on Plotly Express (Other methods I’ve seen are for other libraries) so its a challenge: the plot that the function on the server side should be returning is the one with the changed display and since it can only be changed with the .show() method I’m still not sure how to return the plot with the changed .show() configuration from my function server call so the toolbar doesn’t show on my form component when I run the app.

2

I see you haven’t yet trying the ‘update_layout()’ function.
Here’s an example code snippet that demonstrates how to hide a floating panel:

import plotly.graph_objects as go

# Create a sample scatter plot
fig = go.Figure(data=go.Scatter(x=[1, 2, 3], y=[4, 5, 6], name='Data'))

# Update the layout to hide the legend
fig.update_layout(showlegend=False)

# Display the plot
fig.show()

Hope this helps. If you have any questions please just ask.

1 Like
3

I think the interactive property on the Plot component is what you’re looking for!

Here are the docs Plots: Default Interactivity.

2 Likes
4

Thank you. I followed you cue and used the modebar_remove option inside update layout:

fig.update_layout(modebar_remove=[‘zoom’, ‘pan’, ‘lasso’, ‘select’,‘toimage’])

This works out great to remove the buttons and still keep the interactive features of the chart!

1 Like
5

Thank you so much for the answer. I’m exploring this option to remove all interactivity but researching online, it seems that ‘plotly express’ does not support dissabling all interactivity and that it is rather an option only available for regular ‘plotly’. Any chance that I’m missing something?