Plotly modebar appearance unresponsive in Gradio Plot

I have a user interface, hosted here, that allows users to create plots with their data (among other things). The plots are generated with plotly express (scatter plots), and by default include a modebar that allows interactivity (e.g. zoom, download, etc). Outside of my gr.Blocks() layout, the modebar responds normally to updates, such as:


However, inside my gradio app the modebar defaults to an odd orientation. It is cramped in the upper right corner of the plot and appears in two columns. I would really like to change this orientation (as in the line of code above) so that it no loner overlaps with my legend, however it does not respond to any update commands.

Anyone else encountered this?

hi @dpraz,
do you mean that both charts overlap given a different screen width?
right now seem to work for me

But on a narrower screen this happens

Not quite @radames - but thank you for alerting me to that other problem. My issue is best seen in this attached image. The modebar (which only appears when the mouse hovers near it) overlaps the legend in its current position. Unfortunately, it doesn’t respond to commands (e.g. to reposition it) while inside my gr.Blocks() layout.

hi @dpraz ,

I did try adding a different height=600 to the px.line() but it didn’t change the problem. It seems like you can look at plotly specifications to maybe adding padding and margins to avoid that issue, I don’t think it’s Gradio specific.