# Animation - two different plots using traces **URL:** \ **Category:** 📊 Plotly Python\ **Tags:** question\ **Created:** [May 11, 2022, 9:28am UTC](https://community.plotly.com/t/animation-two-different-plots-using-traces/63984 "2022-05-11T09:28:12Z")\ **Posts on this page:** 2\ **Page:** 1
**Author:** ![geosphere](https://avatars.discourse-cdn.com/v4/letter/g/53a042/32.png) [@geosphere](https://community.plotly.com/u/geosphere)\ **Post date:** [May 11, 2022, 9:28am UTC](https://community.plotly.com/t/animation-two-different-plots-using-traces/63984/1 "2022-05-11T09:28:12Z")
Hello, I’m trying to make a functional plot where I am using two plots. So far it looks like this: ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/d/8/d8e89b756aa7195dcac494a9f9946ceb85a514d6.png) 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: > [@Animating Bar chart one after the other](https://community.plotly.com/t/animating-bar-chart-one-after-the-other/63624): > > Is it possible to animate a Bar chart so that each bar appears in the animation sequentially? For example, in the image above, I want for each frame, a new bar to show up but I don’t want the previously rendered ones to disappear thus if I’m at frame 5 then I’d like to show all the bars until that frame. requests\_df = pd.DataFrame({'requests': total\_requests}) fig = go.Figure(data = [go.Bar(x=requests\_df.index.tolist(), y=requests\_df['requests'])], frames=[ … Code: ```auto trace2 = go.Bar(name="Traffic Requests", x=[requests_df.loc[0]['frame']], y=[requests_df.loc[0]['requests']], opacity=0.15) frames=[dict(name=str(k), data=[go.Barpolar(r=test_df.loc[k]['scaled_bidrates'], theta=test_df.loc[k]['theta'], width=test_df.loc[k]['angles'].tolist(), marker={"color": test_df.loc[k]['winrate']}, customdata=np.stack( (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: [https://chart-studio.plotly.com/~empet/15012/animating-subplots-with-more-than-one-t/#/](https://chart-studio.plotly.com/~empet/15012/animating-subplots-with-more-than-one-t/#/) > [@Multiple traces in multiple animation plots](https://community.plotly.com/t/multiple-traces-in-multiple-animation-plots/15019/5): > > OK, got the multiple traces per graph working fine by following your example. Thank you for your help. Still have to get plotting online working or I would show results. With respect to your Bcl2 graph. Is it possible to label the outermost leaf of each branch? I saw the hover labels but a static label for each gene in the tree would be useful. May not be possible. Can anyone help me figure this out? Thanks! ---
**Author:** ![empet](https://avatars.discourse-cdn.com/v4/letter/e/977dab/32.png) [@empet](https://community.plotly.com/u/empet)\ **Post date:** [May 12, 2022, 9:45am UTC](https://community.plotly.com/t/animation-two-different-plots-using-traces/63984/2 "2022-05-12T09:45:23Z")
@geosphere Here is an example of animating simultaneously and cumulatively a go.Barpolar and go.Bar, displayed in a subplot: ```auto 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] width=[20,15,10,20,15,30,15] 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_color="#ff8c00", marker_line_color="black", 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])], name=f"fr{k}", traces=[0,1]) for k in range(len(r))] #r, theta, width, x, bh must have the same len=number of frames fig.update(frames=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": [[f.name], frame_args(fr_duration)], "label": f"fr{k+1}", "method": "animate", } for k, f in enumerate(fig.frames) ], } ] fig.update_layout(sliders=sliders, 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, }]) ```