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.…

You could use the component I created dash_breakpoints to render the graph with a different layout on different screen sizes :slight_smile:

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 de…

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

Responsive legend position

Dash Python

hoatran November 8, 2022, 12:38pm 2

Maybe set oriental = h when updating layout could help. You can see this link: Legends in Python

Topic		Replies	Views
PSA: Scaling Graphs in Dash Dash Python show-and-tell	7	3835	October 29, 2021
Avoid legend automatically repositioning 📊 Plotly Python	4	10562	August 28, 2018
responsive charts with Plotly-Dash Dash Python	13	2385	June 26, 2023
How to position the legend and remove the empty spaces in dcc.Graph? Dash Python	2	798	October 17, 2022
Responsive legend at the bottom of a chart, is it possible? plotly.js	1	8434	July 15, 2016

Responsive legend position

Related topics