v5.20.0 New fillgradient not working

[etiennecelery]

Hi all,
Been looking forward for this for a long time. New 5.20.0 version does not work for me:

import pandas as pd
import plotly.graph_objects as go
import numpy as np

x = np.linspace(0, 10, 100)
y = np.sin(x)

trace = go.Scatter(
    x=x,
    y=y,
    mode='none',
    # fillcolor="rgba(0, 255, 0, .5)",
    fillgradient=dict(
        colorscale=[
            [0.0, "rgba(0, 0, 255, 1)"],
            [0.5, "rgba(0, 255, 0, 0)"],
            [1.0, "rgba(0, 255, 0, 1)"]
        ],
        start=0,
        stop=1,
        type='horizontal',
    ), 
    fill='tonexty',
    hoveron='fills',
)
layout = go.Layout(
    plot_bgcolor='white',
    paper_bgcolor='white',
)
fig = go.Figure(trace, layout)
fig

data = {
    "data": [
        {
            "x": [1, 1, 2, 2],
            "y": [1, 2, 2, 1],
            "type": "scatter",
            "mode": "none",
            "fill": "tonext",
            "hoveron": "points+fills",
            "fillgradient": {
                "type": "horizontal",
                "colorscale": [
                    [0.0, "rgba(0, 255, 0, 1)"],
                    [0.5, "rgba(0, 255, 0, 0)"],
                    [1.0, "rgba(0, 255, 0, 1)"]
                ]
            }
        },
        {
            "x": [0, 0, 3, 3],
            "y": [0, 4, 4, 1],
            "type": "scatter",
            "mode": "none",
            "fill": "tonext",
            "hoveron": "fills+points",
                "fillgradient": {
                "type": "radial",
                "colorscale": [
                    [0.0, "rgba(255, 255, 0, 0.0)"],
                    [0.8, "rgba(255, 0, 0, 0.3)"],
                    [1.0, "rgba(255, 255, 0, 1.0)"]
                ]
            }
        }
    ],

    "layout": {
        "autosize": True,
        "title": { "text": "Scatter traces with radial color gradient fills" },
        "showlegend": True
    }
}

fig = go.Figure(data=data["data"], layout=data["layout"])

Any help will be appreciated.

This is my second ´fig´, I already checked and I am using v5.20.0

[wilmar-thomas]

I have the same issue. I tried to reproduce the example from plotly reference of fillgradient:

import plotly.graph_objects as go

fig = go.Figure(
    [
        go.Scatter(
            x=[1, 2, 3, 4],
            y=[3, 4, 8, 3],
            fill=None,
            mode="lines",
            line_color="darkblue",
        ),
        go.Scatter(
            x=[1, 2, 3, 4],
            y=[1, 6, 2, 6],
            fill="tonexty",
            mode="lines",
            line_color="darkblue",
            fillgradient=dict(
                type="horizontal",
                colorscale=[(0.0, "darkblue"), (0.5, "royalblue"), (1.0, "cyan")],
            ),
        ),
    ]
)

fig.show()

but I obtain the following result instead:

using v5.20.0 as well.

Thanks for your help.

[LiamConnors]

Hi @etienneceler, @wilmar-thomas

What version of Plotly.js do you see if you hover over the Plotly logo in the corner?

And what environment are you running these in? Is it a notebook / VS code?

[etiennecelery]

Hi @LiamConnors , you are right I see v2.20.0

I am using VS Code indeed!

[wilmar-thomas]

Hi @LiamConnors, thanks for your prompt reply. v2.12.1 shows up for me when I hover.

To add further context: I'm showing the plots in a notebook, furthermore, when saving the figure to a html, the rended html figure behaves as expected, with the gradient being correctly plotted.

[LiamConnors]

This is likely because VS Code uses its own Plotly.js and the version is often behind the latest version available in Plotly.py.

https://plotly.com/python/troubleshooting/#vscode-notebook-nteract-and-streamlit-problems

You should be able to use the installed Plotly.py Plotly.js version by setting the renderer when doing fig.show, like this

fig.show(renderer='notebook')
or set it at the notebook level:

import plotly.io as pio
pio.renderers.default='notebook'

[etiennecelery]

@LiamConnors thank you very much!