Subplots share x-axis in Dash

Dash Python
1

Hello,

I would like to replicate the following subplot behaviour that shares x-axes in Plot.ly, but using Dash instead. Is this possible?

Thank you very much,

2

Every example in plot.ly/python is possible in Dash - they use the same underlying library. You’ll usually just need to assign the fig variable (which is composed of data and layout) to the figure property of the dcc.Graph component, i.e:

trace1 = go.Scatter(
    x=[0, 1, 2],
    y=[10, 11, 12]
)
trace2 = go.Scatter(
    x=[2, 3, 4],
    y=[100, 110, 120],
)
trace3 = go.Scatter(
    x=[3, 4, 5],
    y=[1000, 1100, 1200],
)
fig = tools.make_subplots(rows=3, cols=1, specs=[[{}], [{}], [{}]],
                          shared_xaxes=True, shared_yaxes=True,
                          vertical_spacing=0.001)
fig.append_trace(trace1, 3, 1)
fig.append_trace(trace2, 2, 1)
fig.append_trace(trace3, 1, 1)

fig['layout'].update(height=600, width=600, title='Stacked Subplots with Shared X-Axes')


app.layout = html.Div([
    dcc.Graph(figure=fig, id='my-figure')
])
2 Likes
3

Thank you, @chriddyp!

4

I have a small doubt. What if I want to only increase the height of the first most plot keeping the other two bottom plots fixed. In this example all the three plots are of same height.

5

@chriddyp Thanks for this code. I’m just wondering is there a way to have two bar stacked bar charts side by side where one of them is made from hard-coding traces as you’ve done and the other is generated from selecting a drop-down menu?

Lets say I have this df:

Job  Topic
A      x
B      x
C      y
D      y
A      z
A      z
B      x

What I want is my left bar chart to be stacked by job (height = 7, stacked by 3xA, 2xB, 1xC, 1xD).

I want the right chart to be the topic stacked by job. The topic will be selected from a dcc.Dropdown. Let’s say I picked topic x. The right bar will be: height = 3, stacked by 1xA, 2XB.

I have already made the graphs and linked the second to the dropdown. I have no idea to put them on one x-axis. Sorry for the long message, thanks for taking the time to read it.