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

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 (https://github.com/plotly/plotly.py/issues/2345 and https://github.com/plotly/plotly.js/pull/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?

Commencez par reproduire l’exemple Python Plotly fourni dans la page HTML PyScript, en le comparant avec l’exemple fonctionnel de la documentation et avec le script Plotly CDN explicitement épinglé. Vérifiez comment les traces utilisant fill='tonexty' sont représentées et ordonnées dans le navigateur. Le travail est terminé lorsque legendrank contrôle systématiquement l’ordre de la légende pour l’exemple de traces remplies.