Hi everyone! I have a dcc.Graph in my Dash app with legend shown to the right. Legend captions are rather long, about 50 characters long. When the browser is in full-width mode everything looks great, but in half-screen-width mode the plot itself looks very narrow and legend takes up a lot of space. Is it possible to move legend to the bottom of the graph depending on the viewport width?
Thank you very much!
Maybe set oriental = h when updating layout could help. You can see this link: Legends in Python
Thank you for your reply! It might be my last resort, if no other solution comes up. I would really like to have my legend to the right in full-width mode, if possible.
I’ve looked into this some, it’s kinda a pain.
You could add an event listener to the resize of the window and alter the layout of the figure.
Note: the charts are automatically responsive as long as you take off the width and height arguments. I have it to where when the charts are on a mobile device, they take up for the full width at 50% of the vh and block. I save the original style in a new attr old-style. Then when I go back to regular layout, I restore the old-style.
Also, css tricks with the legend will leave a hole where the legend was supposed to be.
You could use the component I created dash_breakpoints to render the graph with a different layout on different screen sizes 
Does it do this via callbacks? Or just JS?
If callbacks, does this update the layouts or the figures?
The component provides you with an (invisible) element that is triggered whenever the window width/height cross pre-defined breakpoint thresholds. You can then use this to run a callback (server- or client-side).
Ah. Ok. Wasn’t really getting that from the documentation about the functionality.
That’s pretty cool, especially since it is within the scope of what dash can see.
Yeah I need to improve the doc haha, just put that together over a Saturday for a personal project and haven’t come back to it since
Thank you very much!