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:fig.update_layout(modebar={'orientation':'h'})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?
2023-06-30T00:16:18Z
hi@dpraz,do you mean that both charts overlap given a different screen width?right now seem to work for meimage1334×1041 83.8 KBBut on a narrower screen this happensimage911×1100 69.1 KB
2023-06-30T00:37:27Z
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.modebar_issue1920×982 107 KB
2023-06-30T01:58:39Z
hi@dpraz,I did try adding a differentheight=600to thepx.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.