add additional bar chart to each facet for each animation frame in plotly

Question

With the following data that has been minimised for the example:

df = {"date":{"0":1635724800000,"1":1635724800000,"2":1635724800000,"3":1635724800000,"4":1635724800000,"5":1635724800000,"6":1635724800000,"7":1635724800000,"8":1635724800000,"9":1635724800000,"10":1635724800000,"11":1635724800000,"12":1635811200000,"13":1635811200000,"14":1635811200000,"15":1635811200000,"16":1635811200000,"17":1635811200000,"18":1635811200000,"19":1635811200000,"20":1635811200000,"21":1635811200000,"22":1635811200000,"23":1635811200000,"24":1635897600000,"25":1635897600000,"26":1635897600000,"27":1635897600000,"28":1635897600000,"29":1635897600000,"30":1635897600000,"31":1635897600000,"32":1635897600000,"33":1635897600000,"34":1635897600000,"35":1635897600000},"consumption":{"0":11.296,"1":11.296,"2":11.296,"3":11.296,"4":11.296,"5":11.296,"6":11.296,"7":11.296,"8":11.296,"9":11.296,"10":11.296,"11":11.296,"12":30.034,"13":30.034,"14":30.034,"15":30.034,"16":30.034,"17":30.034,"18":30.034,"19":30.034,"20":30.034,"21":30.034,"22":30.034,"23":30.034,"24":26.496,"25":26.496,"26":26.496,"27":26.496,"28":26.496,"29":26.496,"30":26.496,"31":26.496,"32":26.496,"33":26.496,"34":26.496,"35":26.496},"training date":{"0":1635465600000,"1":1635552000000,"2":1635638400000,"3":1635465600000,"4":1635552000000,"5":1635638400000,"6":1635465600000,"7":1635552000000,"8":1635638400000,"9":1635465600000,"10":1635552000000,"11":1635638400000,"12":1635552000000,"13":1635638400000,"14":1635724800000,"15":1635552000000,"16":1635638400000,"17":1635724800000,"18":1635552000000,"19":1635638400000,"20":1635724800000,"21":1635552000000,"22":1635638400000,"23":1635724800000,"24":1635638400000,"25":1635724800000,"26":1635811200000,"27":1635638400000,"28":1635724800000,"29":1635811200000,"30":1635638400000,"31":1635724800000,"32":1635811200000,"33":1635638400000,"34":1635724800000,"35":1635811200000},"horizon":{"0":2.0,"1":1.0,"2":0.0,"3":2.0,"4":1.0,"5":0.0,"6":2.0,"7":1.0,"8":0.0,"9":2.0,"10":1.0,"11":0.0,"12":2.0,"13":1.0,"14":0.0,"15":2.0,"16":1.0,"17":0.0,"18":2.0,"19":1.0,"20":0.0,"21":2.0,"22":1.0,"23":0.0,"24":2.0,"25":1.0,"26":0.0,"27":2.0,"28":1.0,"29":0.0,"30":2.0,"31":1.0,"32":0.0,"33":2.0,"34":1.0,"35":0.0},"variable":{"0":"normal_xgb","1":"normal_xgb","2":"normal_xgb","3":"dynamic_xgb","4":"dynamic_xgb","5":"dynamic_xgb","6":"dynamic_regression","7":"dynamic_regression","8":"dynamic_regression","9":"hpopt_dynamic_regression","10":"hpopt_dynamic_regression","11":"hpopt_dynamic_regression","12":"normal_xgb","13":"normal_xgb","14":"normal_xgb","15":"dynamic_xgb","16":"dynamic_xgb","17":"dynamic_xgb","18":"dynamic_regression","19":"dynamic_regression","20":"dynamic_regression","21":"hpopt_dynamic_regression","22":"hpopt_dynamic_regression","23":"hpopt_dynamic_regression","24":"normal_xgb","25":"normal_xgb","26":"normal_xgb","27":"dynamic_xgb","28":"dynamic_xgb","29":"dynamic_xgb","30":"dynamic_regression","31":"dynamic_regression","32":"dynamic_regression","33":"hpopt_dynamic_regression","34":"hpopt_dynamic_regression","35":"hpopt_dynamic_regression"},"value":{"0":30.5324859619,"1":30.5324859619,"2":30.5324859619,"3":30.5541016053,"4":27.745900401,"5":28.6977168159,"6":22.8562196668,"7":15.6343935113,"8":11.9716831707,"9":26.2932791042,"10":19.3785207891,"11":16.6992309714,"12":33.7919235229,"13":33.7919235229,"14":33.7919235229,"15":31.9040133007,"16":28.8557660894,"17":29.524924057,"18":24.8241943235,"19":14.9217208869,"20":14.845629512,"21":20.9837741005,"22":14.5165446043,"23":13.8412872229,"24":37.2903747559,"25":37.2903747559,"26":37.2903747559,"27":33.4694865505,"28":31.3264693922,"29":31.3068936097,"30":27.0967811924,"31":26.8910611794,"32":28.6014841166,"33":20.2269447496,"34":18.5970186305,"35":20.6206687179},"modelid":{"0":"AhmedOctopusEnergy202201231950","1":"AhmedOctopusEnergy202201231950","2":"AhmedOctopusEnergy202201231950","3":"AhmedOctopusEnergy202201231950","4":"AhmedOctopusEnergy202201231950","5":"AhmedOctopusEnergy202201231950","6":"AhmedOctopusEnergy202201231950","7":"AhmedOctopusEnergy202201231950","8":"AhmedOctopusEnergy202201231950","9":"AhmedOctopusEnergy202201231950","10":"AhmedOctopusEnergy202201231950","11":"AhmedOctopusEnergy202201231950","12":"AhmedOctopusEnergy202201231950","13":"AhmedOctopusEnergy202201231950","14":"AhmedOctopusEnergy202201231950","15":"AhmedOctopusEnergy202201231950","16":"AhmedOctopusEnergy202201231950","17":"AhmedOctopusEnergy202201231950","18":"AhmedOctopusEnergy202201231950","19":"AhmedOctopusEnergy202201231950","20":"AhmedOctopusEnergy202201231950","21":"AhmedOctopusEnergy202201231950","22":"AhmedOctopusEnergy202201231950","23":"AhmedOctopusEnergy202201231950","24":"AhmedOctopusEnergy202201231950","25":"AhmedOctopusEnergy202201231950","26":"AhmedOctopusEnergy202201231950","27":"AhmedOctopusEnergy202201231950","28":"AhmedOctopusEnergy202201231950","29":"AhmedOctopusEnergy202201231950","30":"AhmedOctopusEnergy202201231950","31":"AhmedOctopusEnergy202201231950","32":"AhmedOctopusEnergy202201231950","33":"AhmedOctopusEnergy202201231950","34":"AhmedOctopusEnergy202201231950","35":"AhmedOctopusEnergy202201231950"},"mape":{"0":1.7029467034,"1":1.7029467034,"2":1.7029467034,"3":1.7048602696,"4":1.4562588882,"5":1.5405202564,"6":1.0233905512,"7":0.3840645814,"8":0.0598161447,"9":1.3276628102,"10":0.7155206081,"11":0.4783313537,"12":0.1251223121,"13":0.1251223121,"14":0.1251223121,"15":0.0622632117,"16":0.039230003,"17":0.0169499881,"18":0.1734635971,"19":0.5031723751,"20":0.5057058829,"21":0.3013326863,"22":0.5166629618,"23":0.5391460604,"24":0.4073963902,"25":0.4073963902,"26":0.4073963902,"27":0.2631901627,"28":0.1823093823,"29":0.181570562,"30":0.0226744109,"31":0.0149102196,"32":0.0794642254,"33":0.2366038364,"34":0.2981197679,"35":0.2217440852},"variance":{"0":19.2364859619,"1":19.2364859619,"2":19.2364859619,"3":19.2581016053,"4":16.449900401,"5":17.4017168159,"6":11.5602196668,"7":4.3383935113,"8":0.6756831707,"9":14.9972791042,"10":8.0825207891,"11":5.4032309714,"12":3.7579235229,"13":3.7579235229,"14":3.7579235229,"15":1.8700133007,"16":1.1782339106,"17":0.509075943,"18":5.2098056765,"19":15.1122791131,"20":15.188370488,"21":9.0502258995,"22":15.5174553957,"23":16.1927127771,"24":10.7943747559,"25":10.7943747559,"26":10.7943747559,"27":6.9734865505,"28":4.8304693922,"29":4.8108936097,"30":0.6007811924,"31":0.3950611794,"32":2.1054841166,"33":6.2690552504,"34":7.8989813695,"35":5.8753312821}}

I have used the following code

df = pd.read_json(df)
#fig = px.line(data_frame=df[~df['variance'].isnull()].reset_index(drop=True), x='date', y='variance', facet_col='variable',facet_col_wrap=2, animation_frame='horizon',hover_name='training date', color='variable')
#fig.write_html('variance_by_horizon.html')

#the graph i want below:
fig = px.line(data_frame=df[~df['horizon'].isnull()].reset_index(drop=True), x='date', y='value', facet_col='variable', color='variable', facet_col_wrap=2, animation_frame='horizon',hover_name='training date')
#fig.add_trace()
fig.write_html('predictions.html')

to produce a plotly figure faceted by my desired column and animation frame. The figure 'fig' represents the chart without the added bar chart. I intend for the bar chart to have a separate y axis but overlayed on the line chart.

I have attempted to add a bar chart with a new y value: 'variance' to each facet/frame. without the frame dimension, it seems like it's just a case of looping an 'add_trace' with row/col arguments, but i am unsure how to align the charts correctly so that the data matches with the frame too.

what is the correct way to do this?