Graph order on Figure

Dash Python
1

Hi,

I am looking for a way to combine scatter plot with background (fill) and bar graphs on one figure. Basically I would like scatter graphs to be in the background (so filled color looks as background) and keep bars on the top. However, no mater what the order of graphs the code I get the same outcome - scatters are on the top.

Sample

Do you know any way how to bring bar charts to the top of the figure?

fig = go.Figure(
        data=[
            go.Scatter(
                name='Target', 
                x=data_df.Time, 
                y=data_df.Target, 
                mode='lines', 
                opacity=0.5,
                fill='tonexty',
                # width=4
                line=dict(
                    color=current_app.config["COLOR_PINK_DARK"], 
                    width=2
                    )
                ),
            go.Scatter(
                name='Budget', 
                x=data_df.Time, 
                y=data_df.Budget, 
                mode='lines', 
                opacity=0.5,
                fill='tozeroy',
                # width=4
                line=dict(
                    color=current_app.config["COLOR_PINK"], 
                    width=4
                    )
                ),
            go.Bar(
                name='Forecast',
                x=data_df.Time,
                y=data_df.Remaining,
                marker_color=current_app.config["COLOR_GREY"]
                ),
        ]
    )
2

Hi,

One solution to this is to add a second y axis that overlays the first. Note the yaxis argument specified in the bar trace and the layout update at the end:

fig = go.Figure(
        data=[
            go.Scatter(
                name='Target', 
                x=data_df.Time, 
                y=data_df.Target, 
                mode='lines', 
                opacity=0.5,
                fill='tonexty',
                # width=4
                line=dict(
                    color=current_app.config["COLOR_PINK_DARK"], 
                    width=2
                    )
                ),
            go.Scatter(
                name='Budget', 
                x=data_df.Time, 
                y=data_df.Budget, 
                mode='lines', 
                opacity=0.5,
                fill='tozeroy',
                # width=4
                line=dict(
                    color=current_app.config["COLOR_PINK"] 
                    width=4
                    )
                ),
            go.Bar(
                name='Forecast',
                x=data_df.Time,
                y=data_df.Remaining,
                marker_color=current_app.config["COLOR_GREY"]',
                yaxis='y2'
                ),
        ]
    )
fig.update_layout(yaxis2=dict(overlaying='y'))
3

Hikari, take a look at fig.data and try to change order of traces there.

I had similar problem in the past although it was only line graphs related.
I reorder graph plotting there because other solutions didn’t work well as on top of ordering plots I needed a specific order in legend. Anyway, in my case simple reverse order command did the trick:

fig.data = tuple(reversed(fig.data))

Hope this helps.

4

Hi Marcas,

Thank you for your response. Unfortunately this does not work me. Actually, changing any order in fig.data does not help. For some reason Dash draws it independently of the order of graphs there.

5

Hi Jwolf,

Hmmmm… that’s interesting solution and partially works. Indeed bar gets at the top, but Y axis is not perfectly over the old one :confused:

Sample

6

@Hikari
You can hide the first yaxis by setting visible=False

Like this:

fig.update_layout(yaxis=dict(visible=False), yaxis2=dict(overlaying='y'))
1 Like
7

Works! Thank you very much for help.