plotlyでⅹ軸が連動した水平積上げグラフを作りたい

Question

実現したいこと

２つのグラフを別々に表示した場合は水平積上げグラフになっているのですが、make_subplotsで連動すると連動はできても積上げグラフになりません。
どうしたら「２つのグラフでⅹ軸が連動した水平積上げグラフ」が作れるのか分かりませんので、ご教示お願い致します。

該当のソースコード

import pandas as pd
import plotly.graph_objs as go
import plotly.io as pio
from plotly.subplots import make_subplots

df1 = pd.DataFrame(data=(["X",5.5, 7.5, 3],), 
                   columns=["種類", "工程１", "工程２", "工程３"]
                  )

df2 = pd.DataFrame(data=(["A",10, 12.1, 5.5], ["B", 3.3, 6, 9.5], ["C", 8.2, 0 ,2]), 
                   columns=["種類", "工程１", "工程２", "工程３"]
                  )

df1 = df1.set_index('種類')
df2 = df2.set_index('種類')

df1：

df2：

fig = make_subplots(rows=2, cols=1, shared_xaxes=True)

data1 = [go.Bar(y=df1.index, 
                x=df1.iloc[:, i], 
                name=df1.columns[i],
                orientation="h"
               )
         for i in range(len(df1.columns))]


data2 = [go.Bar(y=df2.index, 
                x=df2.iloc[:, i], 
                name=df2.columns[i],
                orientation="h")
         for i in range(len(df2.columns))]

fig.add_trace(data1[0],1,1)
fig.add_trace(data2[0],2,1)

fig.update_layout(title="連動グラフ",
                  barmode="stack",
                  width=400, height=300,
                  margin=go.layout.Margin(l=0, r=0, b=0, t=30),
                 )
fig.show()

積上げグラフにならず、凡例も工程１しか表示されない。

試したこと

個別で表示した場合は積上げグラフになっています。

data1 = [go.Bar(y=df1.index, 
               x=df1.iloc[:, i], 
               name=df1.columns[i],
              orientation="h")
        for i in range(len(df1.columns))]
layout = go.Layout(
    title=go.layout.Title(text="連動グラフ"),
    xaxis=go.layout.XAxis(title=df1.index.name),
    yaxis=go.layout.YAxis(title="時間"),
    barmode="stack",
    width=400, height=300,
    margin=go.layout.Margin(l=0, r=0, b=0, t=30),
    
)
fig1 = go.Figure(data=data1, layout=layout)
# fig.update_traces(orientation="h")
fig1.show()

data2 = [go.Bar(y=df2.index, 
               x=df2.iloc[:, i], 
               name=df2.columns[i],
              orientation="h")
        for i in range(len(df2.columns))]
layout = go.Layout(
    title=go.layout.Title(text="連動グラフ"),
    xaxis=go.layout.XAxis(title=df2.index.name),
    yaxis=go.layout.YAxis(title="時間"),
    barmode="stack",
    width=400, height=300,
    margin=go.layout.Margin(l=0, r=0, b=0, t=30),
    
)
fig2 = go.Figure(data=data2, layout=layout)
# fig.update_traces(orientation="h")
fig2.show()

以下のようなグラフの状態で連動できるようにしたい。

追加

add_traceのところを修正したところ積上げグラフにはなりましたが、
凡例がダブっている。
凡例を工程１，工程２，工程３のようにしたい。

# fig.add_trace(data1[0],1,1)
# fig.add_trace(data2[0],2,1)
# 以下のように修正
for i in range(len(data1)):
    fig.add_trace(data1[i],1,1)
    fig.add_trace(data2[i],2,1)

補足情報（FW/ツールのバージョンなど）

python = 3.10.12
pandas = 2.0.3
plotly = 5.9.0

Answer 1

自己解決しました。

fig = make_subplots(rows=2, cols=1, shared_xaxes=True)

colorlist = ['red', 'green', 'yellow']  # 追加

data1 = [go.Bar(y=df1.index, 
                x=df1.iloc[:, i], 
                name=df1.columns[i],
                orientation="h",
                legendgroup="group1",
                marker_color=colorlist[i],  #追加
               )
         for i in range(len(df1.columns))]


data2 = [go.Bar(y=df2.index, 
                x=df2.iloc[:, i], 
                name=df2.columns[i],
                orientation="h", 
                legendgroup="group2",
                marker_color=colorlist[i],  #追加
               )
         for i in range(len(df2.columns))]

for i in range(len(data1)):
    fig.add_trace(data1[i],1,1)
    fig.add_trace(data2[i],2,1)


fig.update_layout(title="連動グラフ",
                  barmode="stack",
                  width=400, height=300,
                  margin=go.layout.Margin(l=0, r=0, b=0, t=30),
                 )

fig.show()