Plotly dash responsiveness

[taweel]

Hello everyone.
I’m trying to make plotly charts inside my dash layout responsive. Is there a method to give each screen size a plot configuration such as font-size, x and y axis configurations, legend orientation, and so on?

[Berbere]

Hello @taweel,

Welcome to the community!

Very recently I also posted some similar questions, you can have a look at it from here:

Is it possible to give graph object margin values any other unit than px?

Hey all, I know that a margin can be added to any Plotly graph object via a dictionary (e.g margin=dict(b='35',t='35')). Those are in px units as default setting. However, keeping them in px units are not great for a complete responsive design, and keeping them as it is results in very big margins wrt to the graph object itself on small devices. Hence, my question is; it is possible to set them in any other unit such as % or vw, vh. If yes, how can I do that? Thank you all, in advance!

TLDR: The trick to make your layout responsive is defining size variables in flexible units such as %, vw, vh etc rather than px. Unfortunately, dash components do not accept any other units different than px. However, you can reach your goal by changing the size variables of the parent component of your dash component via style= {} argument.

Cheers!