Animation - two different plots using traces


I’m trying to make a functional plot where I am using two plots. So far it looks like this:

Now, I want to make both plots to be animated, so that every frame the state changes in both. Currently, only the BarPolar is being animated.

I’ve attempted to animate the bar chart below so that for each frame a another bar is added, it starts as 1 and then for each frame a new bar is added while preserving the ones rendered in previous frame. So far I failed to do so, it’s not consistent with what I wanted to achieve. In the sense that the Barpolar changes its state as it should, but the barchart is either one single bar that is as wide as the whole barchart then it disappears and so on.

Some of my attempts with animating the bar chart:


trace2 = go.Bar(name="Traffic Requests", x=[requests_df.loc[0]['frame']], y=[requests_df.loc[0]['requests']], opacity=0.15)

                                   marker={"color": test_df.loc[k]['winrate']},
                                      (labels.loc[k], factor_proportion.loc[k], winrates.loc[k], bidrates.loc[k]), axis=-1)),
                   go.Bar(x=[requests_df.loc[k]['frame']], y=[requests_df.loc[k]['requests']])
             traces=[0, 1]
           for k in range(len_df)

data = [trace1, trace2]

# add subplots to existing traces
fig = go.Figure(data=data, frames=frames).set_subplots(2, 1, 
                                                       specs=[[{"type": "barpolar"}], 
                                                              [{"type": "bar"}]])

*Trace 1 is theused for BarPolar, basically I’m using a go.BarPolar.

As for references I found these helpful:

Can anyone help me figure this out?


Here is an example of animating simultaneously and cumulatively a go.Barpolar and go.Bar, displayed in a subplot:

import numpy as np
import plotly.graph_objects as go

fig=go.Figure().set_subplots(2,1, vertical_spacing=0.05,
                             specs=[[{"type": "polar"}], [{"type":"bar"}]])

r=[3.5, 1.5, 2.5, 4.5, 4.5, 4, 3]
theta=[65, 15, 210, 110, 312.5, 180, 270]
x= np.arange(1, 8)
bh = [4, 6, 3, 7, 8, 5, 9]

fig.add_trace(go.Barpolar(r=r[:1], theta=theta[:1], width=width[:1], 
                          marker_line_width=1),1, 1)
fig.add_trace(go.Bar(x=x[:1], y=bh[:1], marker_color="green", width=0.95), 2,1);

fig.update_layout(width=800, height=700, xaxis_range=[0.5, 7.5], yaxis_range=[0, max(bh)+0.5]);

frames=[go.Frame(data=[go.Barpolar(r=r[:k+1], theta=theta[:k+1], width=width[:k+1]),
                       go.Bar(x=x[:k+1], y=bh[:k+1])],
                 traces=[0,1]) for k in range(len(r))]  #r, theta, width, x, bh must have the same len=number of frames


def frame_args(duration):
    return {
            "frame": {"duration": duration},
            "mode": "immediate",
            "fromcurrent": True,
            "transition": {"duration": duration, "easing": "linear"},

fr_duration=50  # customize this frame duration according to your data!!!!!
sliders = [
                "pad": {"b": 10, "t": 50},
                "len": 0.9,
                "x": 0.1,
                "y": 0,
                "steps": [
                        "args": [[], frame_args(fr_duration)],
                        "label": f"fr{k+1}",
                        "method": "animate",
                    for k, f in enumerate(fig.frames)

                  updatemenus = [
                        "buttons": [
                             "args": [None, frame_args(fr_duration)],
                             "label": "▶", # play symbol
                             "method": "animate",
                             "args": [[None], frame_args(fr_duration)],
                             "label": "◼", # pause symbol
                             "method": "animate",
                        "direction": "left",
                        "pad": {"r": 10, "t": 70},
                        "type": "buttons",
                        "x": 0.1,
                        "y": 0,