Announcing Dash Bio 1.0.0 🎉 : a one-stop-shop for bioinformatics and drug development visualizations.

How can I move the animation Play button and slider closer to the plot?

Hi, I am working with an animated plot and would like to move the Play button and slider bar closer to the plot itself. The plot has all of the axis titles and ticks removed so everything is blank. I’ve attached a screenshot of the plot. Here’s the current code I’m using to animate the data:

color_discrete_map = {team_names[0]: colour0, team_names[1]: colour1, 'Ball': 'black'}

# Plotly Express animation
fig = px.scatter(df, x="X", y="Y", color="Team", hover_name="NickName", animation_frame="GameTime",
                 animation_group="NickName", range_x=[-4,110], range_y=[-4,72], size='size', size_max=9,
                 width=900, height=700, color_discrete_map=color_discrete_map,
                 hover_data={'X': False,'Y':False,'GameTime':False,'size':False, 'Team':False, 'Position':False})


And here’s the screenshot:

Thanks!

Probably not the prettiest or most elegant way to accomplish this but it worked:

# position the buttons (closer to the plot)
fig.update_layout(updatemenus=[dict(type='buttons',
                  showactive=False,
                  y=-0.10,
                  x=-0.05,
                  xanchor='left',
                  yanchor='bottom')
                        ])

# position the slider (closer to the plot)
fig['layout']['sliders'][0]['pad']=dict(r= 70, t= 0.0,)

1 Like