`Legendrank` does not work in plotly (pyscript) when `fill` argument is used

[jankaWIS]

Hi,

I am using Python and Plotly in my web application. In my plots, I'd like to set the order of the traces appearing in the legend in a custom way. I saw in the docs and relevant issues/PRs (#2345 and plotly/plotly.js#6918) that it is now possible. It works if I use the example from the docs and run it on my computer but it doesn't work in my web app - it doesn't produce any effect.

In the application, I'm using the latest version of plotly (at least I believe so):

<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Plot reliability</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css"/>
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!--    for plotly -->
    <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>

    <link rel="stylesheet" href="css/style.css"/>
    <py-env>
      - numpy
      - matplotlib
      - plotly
      - pandas
      - paths:
        - src/functions.py

I tried also specifying it manually to <script src="https://cdn.plot.ly/plotly-2.30.0.min.js" charset="utf-8"></script>--> following this page but it also didn't work and I'm not sure this is the problem (but could be).

The code that I'm trying to run is something like this, and even if I run it in plotly where the legendrank otherwise works, here it doesn't:

import plotly.graph_objects as go
import numpy as np

# Sample data for demonstration
x = np.linspace(1, 10, 100)
y_mean = np.log(x-0.5)
y_upper = y_mean + 0.1  # Simulated upper bound
y_lower = y_mean - 0.1  # Simulated lower bound
X1 = np.array([1, 5, 8])
Y1 = np.array([0.6, 0.95, 0.85])
hovertemplate = 'X:%{x}<br>Y:%{y}'

# Creating the figure and adding traces
fig = go.Figure()

# Adding upper bound fill trace
fig.add_trace(go.Scatter(x=x, y=y_upper, fill=None, mode='lines', name='Upper Bound', hovertemplate=hovertemplate, legendrank=1))

# Adding mean prediction trace
fig.add_trace(go.Scatter(x=x, y=y_mean, name='Mean Prediction', hovertemplate=hovertemplate, legendrank=2))

# Adding lower bound fill trace
fig.add_trace(go.Scatter(x=x, y=y_lower, fill='tonexty', mode='lines', name='Lower Bound', hovertemplate=hovertemplate, legendrank=3))

# Adding desired reliability markers
fig.add_trace(go.Scatter(x=np.array(X1[0]), y=np.array(Y1[0]), mode='markers', name='Point 1', marker=dict(color='green', size=10), legendrank=4))
fig.add_trace(go.Scatter(x=np.array(X1[1]), y=np.array(Y1[1]), mode='markers', name='Point 2', marker=dict(color='red', size=10), legendrank=5))

# Update layout for a cleaner look
fig.update_layout(
    title='Plot with Custom Legend Order using legendrank',
    xaxis_title='X Axis',
    yaxis_title='Y Axis',
    legend_title='Legend',
    legend=dict(x=1, y=1),
    hovermode='closest'
)

# Show plot
fig.show()

For reference, if I do the example from the docs and tweak it a bit, it still works:

import plotly.graph_objects as go
x = [1,2,3]
y = [1,2,1]

fig = go.Figure()
fig.add_trace(go.Bar(name="fourth", x=["a", "b"], y=[2,1], legendrank=6))
fig.add_trace(go.Bar(name="second", x=["a", "b"], y=[2,1], legendrank=4))
fig.add_trace(go.Bar(name="first", x=["a", "b"], y=[1,2], legendrank=2))
fig.add_trace(go.Bar(name="third", x=["a", "b"], y=[1,2], legendrank=3))
fig.add_shape(
    legendrank=1,
    showlegend=True,
    type="line",
    xref="paper",
    line=dict(dash="5px"),
    x0=0.05,
    x1=0.45,
    y0=1.5,
    y1=1.5,
)

fig.add_trace(go.Scatter(x=x, y=y, name='mean predicted<br>number of trials (P)', legendrank=5))
fig.add_trace(go.Scatter(x=[1], y=[2], mode='markers', name='Point 1', marker=dict(color='green', size=10), legendrank=7))

fig.show()

will show correctly:

Notice that the order in the legend is completely arbitrary in the first example, and doesn't even follow the order in which the traces are added. What is going on here? Am I missing something?

[jankaWIS]

I have an update on the bug, it fails with fill argument.

This code produces the right result:

import plotly.graph_objects as go
import numpy as np

# Sample data for demonstration
x = np.linspace(1, 10, 100)
y_mean = np.log(x-0.5)
y_upper = y_mean + 0.1  # Simulated upper bound
y_lower = y_mean - 0.1  # Simulated lower bound
X1 = np.array([1, 5, 8])
Y1 = np.array([0.6, 0.95, 0.85])
hovertemplate = 'X:%{x}<br>Y:%{y}'

# Creating the figure and adding traces
fig = go.Figure()


# # Adding upper bound fill trace
fig.add_trace(go.Scatter(x=x, y=y_upper, fill=None, mode='lines', name='Upper Bound', hovertemplate=hovertemplate, legendrank=1))

# Adding mean prediction trace
fig.add_trace(go.Scatter(x=x, y=y_mean, name='Mean Prediction', hovertemplate=hovertemplate, legendrank=2))

# # Adding lower bound fill trace
# fig.add_trace(go.Scatter(x=x, y=y_lower, fill='tonexty', mode='lines', name='Lower Bound', hovertemplate=hovertemplate, legendrank=3))

# Adding desired reliability markers
fig.add_trace(go.Scatter(x=np.array(X1[0]), y=np.array(Y1[0]), mode='markers', name='Point 1', marker=dict(color='green', size=10), legendrank=4))
fig.add_trace(go.Scatter(x=np.array(X1[1]), y=np.array(Y1[1]), mode='markers', name='Point 2', marker=dict(color='red', size=10), legendrank=5))

# Update layout for a cleaner look
fig.update_layout(
    title='Plot with Custom Legend Order using legendrank',
    xaxis_title='X Axis',
    yaxis_title='Y Axis',
    legend_title='Legend',
    legend=dict(x=1, y=1),
    hovermode='closest'
)

# Show plot
fig.show()

while if I plot with the line:
fig.add_trace(go.Scatter(x=x, y=y_lower, fill='tonexty', mode='lines', name='Lower Bound', hovertemplate=hovertemplate, legendrank=3))

it will always ignore the order in the legend, for instance:

import plotly.graph_objects as go
import numpy as np

# Sample data for demonstration
x = np.linspace(1, 10, 100)
y_mean = np.log(x-0.5)
y_upper = y_mean + 0.1  # Simulated upper bound
y_lower = y_mean - 0.1  # Simulated lower bound
X1 = np.array([1, 5, 8])
Y1 = np.array([0.6, 0.95, 0.85])
hovertemplate = 'X:%{x}<br>Y:%{y}'

# Creating the figure and adding traces
fig = go.Figure()


# # Adding upper bound fill trace
fig.add_trace(go.Scatter(x=x, y=y_upper, fill=None, mode='lines', name='Upper Bound', hovertemplate=hovertemplate, legendrank=1))

# # Adding mean prediction trace
# fig.add_trace(go.Scatter(x=x, y=y_mean, name='Mean Prediction', hovertemplate=hovertemplate, legendrank=2))

# Adding lower bound fill trace
fig.add_trace(go.Scatter(x=x, y=y_lower, fill='tonexty', mode='lines', name='Lower Bound', hovertemplate=hovertemplate, legendrank=3))

# Adding desired reliability markers
fig.add_trace(go.Scatter(x=np.array(X1[0]), y=np.array(Y1[0]), mode='markers', name='Point 1', marker=dict(color='green', size=10), legendrank=4))
# fig.add_trace(go.Scatter(x=np.array(X1[1]), y=np.array(Y1[1]), mode='markers', name='Point 2', marker=dict(color='red', size=10), legendrank=5))

# Update layout for a cleaner look
fig.update_layout(
    title='Plot with Custom Legend Order using legendrank',
    xaxis_title='X Axis',
    yaxis_title='Y Axis',
    legend_title='Legend',
    legend=dict(x=1, y=1),
    hovermode='closest'
)

# Show plot
fig.show()

[Coding-with-Adam]

Thank you for reporting this, @jankaWIS

I ran your code and can confirm the same error. The fill=None doesn't have a negative impact, but the fill='tonexty' does cause the legendrank to fail.

[vladyslav-burylov]

Workaround: use legendgroup instead (assuming you don't need it for its real purpose) and order shapes inside data in the same way. Shapes will be rendered left-to-right according to legendgroup then.

Figure(
  data=[
     Scatter(
       x=[0, 1],
       y=[0, 1],
       name="left",
       legendgroup=0
     ),
     Scatter(
       x=[0, 1],
       y=[0, 1],
       name="middle",
       legendgroup=1
     ),
     Scatter(
       x=[0, 1],
       y=[0, 1],
       name="right",
       legendgroup=2
     ),
  ]
)