Plotly: How to adjust the position of sliders and updatemenus to make room for x-axis tickmarks?

user_13659174 0
Viewed 2202

I am using an animation frame in my in my plotly express graph but it overlaps with my x-axis. What can I do ?

This is my code :

data = pd.read_csv('file.csv')
fig = px.scatter(data, x = "model", y = "price", color="competitor", hover_data=['Discount'], animation_frame="date")

And this is my problem : How can I lower the animation frame bar ? Or maybe put it on top of the graph? Or move the x axis on top of the graph instead of the bottom?

enter image description here

plotly python-3.x python
1 Answers

You can easily adjust the margins of the plot itself, along with placement of the slider and corresponding updatebuttons by adjusting the padding in:

fig.update_layout(margin=dict(l=20, r=20, t=20, b=200),paper_bgcolor="LightSteelBlue")
fig['layout']['updatemenus'][0]['pad']=dict(r= 10, t= 150)
fig['layout']['sliders'][0]['pad']=dict(r= 10, t= 150,)

The snippet above will turn this:

enter image description here

... into this:

enter image description here

Complete code:

import plotly.express as px
df = px.data.gapminder()
fig = px.scatter(df, x="gdpPercap", y="lifeExp", animation_frame="year", animation_group="country",
           size="pop", color="continent", hover_name="country",
           log_x=True, size_max=55, range_x=[100,100000], range_y=[25,90])

fig.update_layout(margin=dict(l=20, r=20, t=20, b=200),paper_bgcolor="LightSteelBlue")
fig['layout']['updatemenus'][0]['pad']=dict(r= 10, t= 150)
fig['layout']['sliders'][0]['pad']=dict(r= 10, t= 150,)
fig.show()
user_34377870
Related