I'm making a plotly plot using Dash. When I view it on my desktop it looks good
But when I view it on my phone, the legend position overlaps the graph.
My legend is set up using
legend=dict(
bgcolor='rgba(0,0,0,0)',
orientation="h",
yanchor="bottom",
y=-0.15,
xanchor="left",
x=0
)
How do I fix the legend? Bonus question, how do I fix the modebar?
I made a hacky workaround. The reason for the scaling issue was the screen width on phones is very low (~300px), so I set the min-width of the body to 500px
body {
min-width:500px;
}
This causes the site to appear zoomed in after first loading it, so I put in the small JS script
<meta id="myViewport" name="viewport" content="width=device-width" />
<script>
window.onload = function () {
if(window.innerWidth <= 500) {
var mvp = document.getElementById('myViewport');
mvp.setAttribute('content','width=500');
}
}
</script>
This seems to improve it to the point of useability. Not a perfect solution, but eh.. I also had a locked aspect ratio before, but I have unlocked the aspect ratio for phones so it's free to flex.
