Hello. I’m fairly new to plotly dash and I’ve set up a graph using two y-axis and a shared x-axis. The graph is mostly as expected, but the bar chart (yaxis2) covers the line/scatter chart (yaxis1). From what I’ve read, the order of the traces in the code should control which of the two is shown on top. I’ve tried reversing it, but no effect. As a work around, I’ve lowered the opacity of the bar chart. The code I’m using is:
def updateForwardGraph(selectedRows):
if not selectedRows:
return []
selectedName = [row['Name'] for row in selectedRows]
selectedTeam = [row['Team'] for row in selectedRows]
selectedTeamDisplay = [row['Team Name Full'] for row in selectedRows]
dffName = dfGameweek[dfGameweek['Name'].isin(selectedName)].copy()
dffTeam = dfOddsGameweek[dfOddsGameweek['Team'].isin(selectedTeam)].copy()
dffTeamHomeMatch = dffTeam[dffTeam['HomeAway'] == 'H']
dffTeamAwayMatch = dffTeam[dffTeam['HomeAway'] == 'A']
# Create the main graph
fig = go.Figure()
# Create the second y-axis
fig.add_trace(go.Bar(x=dffTeamAwayMatch['Gameweek'], y=dffTeamAwayMatch['Winning Probability'], marker_color= 'lightgrey',
name=f'{selectedTeamDisplay[0]} winning probab. away', yaxis='y2', opacity=0.4,
text=dffTeamAwayMatch['Opponent name'], textposition='outside'))
fig.add_trace(go.Bar(x=dffTeamHomeMatch['Gameweek'], y=dffTeamHomeMatch['Winning Probability'], marker_color='lightblue',
name=f'{selectedTeamDisplay[0]} winning probab. home', yaxis='y2', opacity=0.4,
text=dffTeamHomeMatch['Opponent name'], textposition='outside'))
# Create the first y-axis
fig.add_trace(go.Scatter(x=dffName['Gameweek'], y=dffName['xG rolling 5'], mode='lines',
name='5 matches rolling average'))
fig.add_trace(go.Scatter(x=dffName['Gameweek'], y=dffName['xGI non-pen'], mode='lines+markers+text',
name='Per match', text=dffName['xGI non-pen'], textposition='top right'))
# Update the layout for the individual series
fig.update_traces(line=dict(color='red'), selector=dict(name='5 matches rolling average'))
fig.update_traces(line=dict(color='black'), selector=dict(name='Per match'))
# Update the layout for the figure
fig.update_layout(
height=600,
title=f'{selectedName[0]}: xGI non-penalty per game and 5 game rolling average',
paper_bgcolor='#e7edf1',
plot_bgcolor='white',
yaxis=dict(gridcolor='lightgrey', title='xGI non-penalty', range=[0, 2.5]),
yaxis2=dict(showgrid=False, title='Winning probability', range=[0, 100], dtick=10, overlaying='y', side='right'),
xaxis=dict(dtick=1, showgrid=False, title='Gameweek'),
legend_title='',
legend=dict(yanchor="top", y=0.99, xanchor="left", x=0.01, bgcolor='white'),
font=dict(family='Nova mono', size=16, color='black')
)
graph = dcc.Graph(id='xG line', figure=fig)
return graph
Does anyone have a suggestion to how I can change the code to get the lines to show on top of the bars?