Two animated yaxis

📊 Plotly Python
1

I’d like to show the power and soc of a tesla supercharging at two different sites in an animated graph. I’m having trouble getting the second axis to work with it’s own scale. Any help would be greating apprecated! Thank you!

code:

df1 = pd.DataFrame(data=final_df)
df2 = pd.DataFrame(data=final_df2)

df = pd.concat([df1, df2], axis=0)

#fig = px.bar(df, x="Charger Version", y="SoC", color="Charger Version",
#  animation_frame="time", animation_group="Charger Version", range_y=[0,100])

frames = []
df.Power = df.Power * -1
df2 = df.loc[df['Charger Version']=='V2']
df3 = df.loc[df['Charger Version']=='V3']
for i in range(1, df.__len__()):
    frames.append(
        go.Frame(
        data=[go.Scatter(x=df2.time[0:i], y=df2.SoC[0:i], name='V2_SoC', yaxis='y1'), go.Scatter(x=df3.time[0:i], y=df3.SoC[0:i], name='V3_SoC', yaxis='y1'),
              go.Scatter(x=df2.time[0:i], y=df2.Power[0:i], name='V2_Power', yaxis='y2'), go.Scatter(x=df3.time[0:i], y=df3.Power[0:i], name='V3_Power', yaxis='y2')],
        )

                   )
fig = go.Figure(
    data=[go.Scatter(x=df2.time[0:0], y=df2.SoC[0:0], name='V2_SoC', yaxis='y1'), go.Scatter(x=df3.time[0:0], y=df3.SoC[0:0], name='V3_SoC', yaxis='y1'),
          go.Scatter(x=df2.time[0:0], y=df2.Power[0:0], name='V2_Power', yaxis='y2'), go.Scatter(x=df3.time[0:0], y=df3.Power[0:0], name='V3_Power', yaxis='y2')],
    layout=go.Layout(
        xaxis=dict(range=[0, 28], autorange=False),
        yaxis=dict(range=[0, 70], autorange=False),
        yaxis2=dict(range=[0, 170], autorange=False, side='right'),
        title="SoC vs Time",
        updatemenus=[dict(
            type="buttons",
            buttons=[dict(label="Play",
                          method="animate",
                          args=[None])])]
    ),frames=frames
)
fig.update_layout(xaxis_title='Time ( Minutes )', yaxis_title='SoC / Power ( % / KW )', transition_duration =100)

fig.show()