Draw plotly bar traces under scatter traces rather than over?

Question

I'm trying to show several traces on the same plot in plotly/dash. Regardless of the order of the traces I specify in the data variable, the bar traces always end up drawing over the scatter traces. Here's what I've got for generating the plot.

Each of the scatter traces are generated with

go.Scatter(
    x=list(dfN['DATE'])
    ,y=list(dfN['VALUE'])
    ,text=list(dfN['VALUE'].round(decimals=3))
    ,hoverinfo='text+name'
    ,name='Scatter N'
    ,mode='lines+markers'
    ,marker=dict(
        color='rgb(230,159,0)',
        size=15,
        opacity=1,
        line={'width': 0.5, 'color': 'white'}
    )
)

and each of the bar traces are generated with

dropin_style=dict(
    hoverinfo='text+name'
    ,hoverlabel=dict(
        namelength=-1
    )
    ,textposition = 'auto'
    ,yaxis='y2'
)
go.Bar(
    legendgroup='bars'
    ,x=list(dfM['DATE'])
    ,y=list(dfM['VALUE'])
    ,text=list(dfM['VALUE'])
    ,name='Bar M'
    ,**dropin_style
    ,marker={'color':'#cccccc'}
    ,textfont=dict(color='#000000')
)

then the traces are all put together with

data = [bar1, bar2, bar3, bar4, bar5,
                scatter1, scatter2, scatter3,]
layout = go.Layout(
    showlegend=True
    ,legend=dict(orientation="h",x=0, y=1.3)
    ,barmode='stack'
    ,xaxis=dict(
        dtick='M1'
    )
    ,yaxis=dict(
        range=[0,1.1],
        fixedrange=True,
        title='Percent'
    )
    ,yaxis2=dict(
        range=[0, ymax]
        ,fixedrange=True
        ,side='right'
        ,title='Count'
        ,overlaying='y'
        ,zeroline=False
        ,showgrid=False
    )
)
return {'data': data, 'layout': layout}

What can I do in order to get the bar traces to plot under the scatter traces? I tried setting opacity of the bars but it makes the whole graph way harder to look at.

Do you have the same issue when plotting offline, e.g. in a Jupyter notebook? — Maximilian Peters

nicolaskruchten nicolaskruchten · Accepted Answer · 2018-04-18T17:34:14

I think something's missing from your code here but I infer that **dropin_style specifies that the bars have yaxis: "y2" and from my trials it looks traces associated with yaxis get drawn, then those associated with yaxis2 so if you want your scatter traces to be on top of your bar traces, you'll want the scatter traces associated with yaxis2, and you can switch up the side so that the correct ones end up on the right/left.

Draw plotly bar traces under scatter traces rather than over?

1 Answers