Help needed: subplots overlapping completely, how to 'un-overlap' them? [SOLVED]

Dash Python
1

I have two plots that share the same data but display it differently.

Because of this, I want to make it so that they share the legend, in order to be able to toggle a trace on both subplots with one click. Before I had two different callback functions that generated these plots, then I united them into one single callback.

The problem I get is that they overlap, and I haven’t found a way to fix it. If I just add one single trace, each plot gets displayed w/o any problem. The moment I add the second, the 1st one doesn’t get displayed anymore, despite still being present inside the “figure” property.

Any help is much appreciated.

This is what I'm trying to achieve (with a shared legend):

plot1
plot1.jpg443×729 42.2 KB

This is what I'm getting:

plot2

And here's the code I'm using: 
@callback(Output('some_dcc.Graph', 'figure'),
                [Input('some_buttons', 'value')]
)
def my_function():
        '''some data computation'''
        
        fig = subplots.make_subplots(rows=2, cols=1)

        for col in dataframe:
            trace = go.Bar(
                x=dataframe.index,
                y=dataframe[col].values,
                name=col
            )
            fig.append_trace(trace, 1, 1)

        del trace
        for col in dataframe:
                trace = go.Scatter(
                    x=dataframe.index,
                    y=dataframe[col].values,
                    name=col
                )
            fig.append_trace(trace, 2, 1)

        layout = go.Layout(
        )

        fig.layout = layout

        return fig

SOLUTION - turns out you need to specify in the layout the % that each subplot occupies, like this:

layout = go.Layout(
            yaxis={domain: [0, 0.50]},
            yaxis2={domain: [0.51, 1]}
)

Now I have a different problem as in the axis are misaligned, but that’s another issue :

2

glad you found a solution !

1 Like