How to make an animation frame update data and layout simultaneously


Hi there,

I’m using plotly to create an interactive timeline and have run into the following issue:

When using animation frames similar to the example here I am unable to update both the data and the layout (i.e. xaxis range) in the same frame.

I know that the data in the frame is correct because if I pause the visual it will show the correct data and axis range. However, when I click play again, the data begins to update while the layout axis range does not.

I have attached my code below, any help would be appreciated as I have been pulling my hair out for days trying to figure this out.

figure = {

    'data':[{'x':[df['Date']], 'y':[df['High']], 'mode':'lines'}],

        'font' : {'family' : 'Courier New, monospace', 'color' : '#FFF'},

        'plot_bgcolor' : '#000',
        'paper_bgcolor' : '#000',

        'hovermode' : 'closest',
        'hoverdistance' : 50,
        'dragmode' : 'pan',

        'sliders': {
            'args' : ['transition', {'duration':0, 'easing':'linear'}],
            'values': df['Date'],

        'updatemenus' : [{
            'buttons': [
                    'args' : [None, {'frame': {'duration':1, 'redraw': False},
                                'fromcurrent':True, 'transition':{'duration':0, 'easing':'linear'}}],
                    'args' : [[None], {'frame': {'duration':0, 'redraw': False},
                                'mode':'immediate', 'transition':{'duration':0}}],
            'direction': 'left',
            'type': 'buttons',

        'xaxis' : {
            'title' : 'Date',
            'titlefont' : {'color' : 'white'},
            'tickcolor' : '#FFF',
            'tickfont' : {'color':'white'},
            'showgrid' : False,
            'zeroline' : False,
            'type' : 'date'

        'yaxis' : {
            'title' : 'blah',
            'titlefont' : {'color':'white'},
            'tickcolor' : '#FFF',
            'tickfont' : {'color':'white'},


sliders_dict = {
    'active': 0,
    'yanchor': 'top',
    'xanchor': 'left',
    'currentvalue': {
        'font': {'size': 20},
        'prefix': 'Date:',
        'visible': True,
        'xanchor': 'right'
    'transition': {'duration': 0, 'easing': 'linear'},
    'pad': {'b': 10, 't': 50},
    'len': 0.9,
    'x': 0.1,
    'y': 0,
    'steps': []

for ii in range(len(df)):

    if ii < 90:
        days = ii
        days = 90

    data_by_month = df.iloc[ii-days:ii]

    data_dict = {
        'x' : list(data_by_month['Date']),
        'y' : list(data_by_month['High']),
        'marker': {'color':'#FFF'},
        'text':'Shooting Incident'

    frame = {'data':[data_dict], 'layout':{'xaxis': {'range':[pd.to_datetime(df['Date'][ii-(days)]), pd.to_datetime(df['Date'][ii] + pd.Timedelta(days=45))], 'type':'date', 'autorange':False}}, 'name':str(df['Date'][ii])}


    slider_step = {
        'args': [[str(df['Date'][ii])], {'frame': {'duration':0, 'redraw':False},
        'mode':'immediate', 'transition': {'duration':0}}],

figure['layout']['sliders'] = [sliders_dict]

Hi @jbent15,

Could you include some sample data for the df variable?


1 Like

Hi Jon,

Oops, I forgot to include the code that generates df. Here it is:

peak = False
for ii in range(1097):
    if peak:
        peak = False
        det = np.random.rand()
        if (det > .75):
            peak = True

df = pd.DataFrame(data={'Date':pd.date_range(start='1/1/2015', end='1/1/2018'), 'High':lineData})

Hi @jbent15,

It does look like there is some kind of bug going on here. I noticed that when I move the slider around using the mouse everything seems to update alright. And if I hit “Play” after moving the slider around it also seems to work properly. But when the animation starts by itself things get messed up.

Another experiment I tried was disabling autoplay in iplot using the auto_play=False argument to plotly.offline.iplot. When I do this in the classic notebook, and then press play to start the animation manually, everything seems to work alright. So as far as I can tell it has something to do with starting the animation immediately.

I don’t have time right now, but it would be helpful to simplify the example a bit so that we can try to reproduce it in Plotly.js directly. The idea would be to remove all of the extra styling info, and trim it down to 5-10 frames. If you’re interested in simplifying it a bit I could convert it to JavaScript and create the Plotly.js issue.



Hi @jmmease,

After following along with what you tried I’m still unable to get the functionality that I want. I’m trying to get both the data and the x-axis range to move when I click play. Currently, If i move the slider around manually I can see that both the data and layout update, and that means that the individual frames do contain the correct information. However, when I click play at any point, the data begins to update but the layout does not, as the x-axis does not change to follow the data. I hypothesize that this is a bug since the layout information in the frame is correct but it does not get rendered when the frames are being played.

Some other things to note: I am using jupyter notebook to run the code, I am using plotly.offline for the plot, and I am running plotly version 3.7.1

If you think that this is not a bug but rather poor coding on my part, I would be happy to try to simplify the example in python and pass that on to you.

Let me know what the best way to approach this would be.



Hi @jbent15,

Yes, I expect there is probably a bug going on here. So the best way forward would be to make a simple example that shows the problem that we could show the plotly.js team. Thanks!