Plotly: How to plot rectangle with gradient color in Plotly?

Question

Can a shape such as a rectangle have a smooth color gradient in Plotly?

I define the shape with a solid fill color as:

shapes=[dict(
    type='rect',
    xref='x',
    yref='paper',
    x0=box_from, x1=box_to,
    y0=0, y1=1,
    fillcolor='Green',
    opacity=0.07,
    layer='below',
    line=dict(width=0),
)]

But I'd like the box not to have a solid color fill, but to have a smooth color gradient.

• This is the example in the documentation I'm following:
  https://plotly.com/python/shapes/#highlighting-time-series-regions-with-rectangle-shapes
• The docs on fillcolor aren't very extensive:
  https://plotly.com/python/reference/#layout-shapes-items-shape-fillcolor
  
• I guess colorscales don't apply to shapes:
  https://plotly.com/python/builtin-colorscales/

My guess is the answer is a simple "not supported", but perhaps someone else knows better.

Answer 1

Someone will correct me if I'm wrong but I think that no, there is no straight implementation to fill with a gradient a shape. But to achieve a similar results you could plot several lines inside the rectangle specifying decreasing rgb values.

For example I added this for loop after the first rectangle definition in the documentation code (changing also the rectangle fillcolor to white).

for i in range(100):
    fig.add_shape(type='line',
    xref="x",
    yref="y",
    x0=2.5,
    x1=3.5,
    y0=i*(2/100),
    y1=i*(2/100),
    line=dict(
                color='rgb({}, {}, {})'.format((i/100*255),(i/100*255),(i/100*255)),
                width=3,
            ))

And the result is:

I know it's impractical and that it can increase a bit the running time but if you care only about the aesthetic it does the job.

Answer 2

Looking at Edoardo Guerrieros excellent suggestion, you could also consider using rgba(0,0,0,0) where the last number sets the opacity of the color. This way you'lll make the background gradually appear behind your rectangle:

Complete code:

import plotly.graph_objs as go

fig=go.Figure()

for i in range(100):
    opac = 1-(i/100)
    fig.add_shape(type='line',
    xref="x",
    yref="y",
    x0=2.5,
    x1=3.5,
    y0=i*(2/100),
    y1=i*(2/100),
    line=dict(color='rgba({}, {}, {}, {})'.format((0),(0),(255),(opac)),
              width=5,))



fig.update_xaxes(range=[2, 4])
fig.update_yaxes(range=[-1, 2.5])

fig.show()