Unable to change the z-order of plotly scatter/line traces

📊 Plotly Python
,
1

I am trying to plot 4 different Plotly traces to one figure.
My px.Scatter dataset is very large (32,000 data points).
This figure consists of two go.Scatter traces, a px.scatter trace, and a px.line trace.
My script runs and the traces all render on the figure.
My two go.Scatter traces ALWAYS render behind the px.scatter and px.line traces.

I had a similar issue with my px.line trace also rendering behind my px.scatter plot, but putting all the relevant data into a single data frame seemed to allow the px.line trace to render infront of the px.scatter.

I have tried manually reordering the traces in everyway possible to no avail: **Example: fig.data =(fig.data[0],fig.data[1],fig.data[2]) **

Notice the grey shaded region behind the scatter plot and line plots. How can I bring this to the front

1
11890×788 299 KB 

import pandas as pd
import numpy as np
import plotly.graph_objects as go
import plotly.io as pio
import plotly.express as px
pio.renderers.default='browser'

df3 = pd.read_csv('filename.csv')
fig1 = px.scatter(df3, x="height_diff", y="flow_speed",
                 trendline="ols",
                 trendline_color_override = 'crimson',
                 template='plotly',
                 color_continuous_scale='Viridis',
                 color=np.random.randn(32145),
                 title='Linear Regression, HYCOM GOFS3.1, 2010-2020, 3hourly mean height difference vs. 3hourly mean Florida Current flow speed'
                 )



fig1.add_traces(px.line(df3, x="hgt_roll_avg", y="flow_roll_avg",color_discrete_sequence=['black']).data)
#fig2 = px.line(df3, x="hgt_roll_avg", y="flow_roll_avg",color_discrete_sequence=['black'])
#fig3 = go.Figure(data=fig1.data + fig.data, layout = fig1.layout)
fig1.update_layout(coloraxis_showscale=False,colorscale=dict(diverging = 'Viridis'))
fig1.add_traces([
    go.Scatter(
        name='Upper Bound',
        x=df3['hgt_roll_avg'],
        y=df3['flow_roll_avg']+df3['std'],
        mode='lines',
        marker=dict(color="#444"),
        line=dict(width=1),
        showlegend=False
    ),
    go.Scatter(
        name='Lower Bound',
       x=df3['hgt_roll_avg'],
       y=df3['flow_roll_avg']-df3['std'],
        marker=dict(color="#444"),
        line=dict(width=1),
        mode='lines',
        fillcolor='rgba(68, 68, 68, 0.3)',
        fill='tonexty',
        showlegend=False
    )
])
fig1.show()

If there is not a solution to this issue, is it possible to produce this plot using only go.Scatter?

2

I think I figured out a work around- for anyone interested:

I rebuilt my 4 traces using ONLY go.Scatter objects. They rendered in the order that they are written into the script
It seems like there is still an issue with forcing z-order when using a combo of both the express and graph_objects versions.

code and figure:

import pandas as pd
import numpy as np
import plotly.graph_objects as go
import plotly.io as pio
import plotly.express as px
import statsmodels.api as sm
import sys
pio.renderers.default='browser'

df3 = read_csv('filename.csv')

fig1 = go.Figure()
fig1.add_traces([
    go.Scatter(
        name='scatter',
        x=df3['height_diff'],
        y=df3['flow_speed'],
        mode='markers',
        marker=dict(color=np.random.randn(32145),colorscale='Viridis'),
        showlegend=False
    ),
    go.Scatter(
                  x=df4['height_diff'],
                  y=df4['bestfit'],
                  mode='lines',
                  marker=go.Marker(color='crimson'),
                  showlegend=False
                  )]) 

fig1.add_traces([
    go.Scatter(
        name='Upper Bound',
        x=df3['hgt_roll_avg'],
        y=df3['flow_roll_avg']+df3['std'],
        mode='lines',
        marker=dict(color="#444"),
        line=dict(width=1),
        showlegend=False
    ),
    go.Scatter(
        name='Lower Bound',
       x=df3['hgt_roll_avg'],
       y=df3['flow_roll_avg']-df3['std'],
        marker=dict(color="#444"),
        line=dict(width=1),
        mode='lines',
        fillcolor='rgba(68, 68, 68, 0.3)',
        fill='tonexty',
        showlegend=False
    ),
    go.Scatter(
        x=df3['hgt_roll_avg'],
        y=df3['flow_roll_avg'],
        mode='lines',
        marker=dict(color="black"),
        line=dict(width=1),
        showlegend=False
    )
])
fig1.show()

2
21888×872 302 KB

notice the gray shaded ‘continuous error’ bands on top :slight_smile:

1 Like