Easy way to add colour fill with gradient?

[Vincent-Cheong]

We can set the fill colour using the fillcolor parameter which accepts colour names and rgb values. This, however, only allows single colours. Is there an easy way to make gradient colours? Below is what I'm actually trying to achieve:

[Torsionov]

I am also trying to find a solution to this problem, I want to understand whether it is possible to do it via colorscales = px.colors. named_colorscales() or whether you need to write similar code: https://stackoverflow.com/questions/60962196/plotly-how-to-plot-rectangle-with-gradient-color-in-plotly

[Vincent-Cheong]

Appreciate your input.

Those in Stackoverflow imply that it's possible but in my opinion the for-loop already says it all that it won't be efficient, more so when the data increases.

According to a reply from Plotly, there is currently no 'straight implementation' dedicated to create gradient filled area. #3025

Correct me if wrong, I found that Vegalite in JSON (or Altair in Python counterpart) appears to be the only package that does so in a 'simple and direct implementation'.

https://vega.github.io/vega-lite/examples/area_gradient.html

However that's Vega, a completely different territory. I still prefer Plotly Python personally.

The only thing is to hope that Plotly development covers this particular issue of gradient fill with 'easy and direct implementation'.

Convenient declaration - that's the thing. If you have a look at Vega, the block of code for gradient is so simple like x1, y1, color, and etc, all easy and convenient to declare.

Hopefully, Plotly can also come up with this feature that is as conveniently good as Vega, or even better.

[lukeic]

I've successfully emulated this effect by using a pseudo-element and a linear-gradient:

.scorecard__graph {
    position: relative;
}

.scorecard__graph::before {
    content: '';
    display: block;
    background: linear-gradient(#fff0, white);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75%;
    z-index: 10;
}

Simply change height, or the colours' start/end position in the linear-gradient, to increase or decrease the size of the gradient (i.e. the faded-out bit).

NOTES:

1. I've disabled the x and y axis titles.
2. .scorecard__graph is the class given to the dcc.Graph() element (I'm using Python).

[vegukamal]

Appreciate your input @lukeic.

How can I do this similar for achieving gradient in plotly gantt chart, metioned some examples below:

https://plotly.com/python/gantt/

As, Instesd of keeping the rgb colors, I wnat to keep the gradient colors.

colors = {'Not Started': 'rgb(220, 0, 0)', 'Incomplete': (1, 0.9, 0.16), 'Complete': 'rgb(0, 255, 100)'}

fig = ff.create_gantt(df, colors=colors, index_col='Resource', show_colorbar=True, group_tasks=True)

Could you please let me know if you have any ideas on achieving this? If possible could you also please also elaborate on how you did with dcc.Graph() ?

[etiennecelery]

Hi, any updates with the implementation of the background fill?

[mateuskienzle]

Hello, there is any updates with this implementation of the background with gradient?

[nicolaskruchten]

There is no update and no one is working on this feature as far as I know.

[vegukamal]

I was working on it earlier, and re-implemented using D3.js as plotly was taking huge time to plot it.

[mateuskienzle]

That's so sad, i really wanted do make this effect works on a chart that i'm implementing in a dashboard, but it will lose a lot of quality without the gradiente effect :(

[artnaz]

I would very much appreciate a possibility to do something like this:

This is slightly different than the previous examples as there the gradient is vertical and I'd like it to be horizontal. But --any-- option is highly appreciated.

[budaesandrei]

I've managed to do something. It's a bit tricky and only useful if you render the chart as a html (probably you could do it in a notebook or something too but haven't explored that option)

This is how it looks

I've created a file called gradients.svg that I import using <link href=''>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="atr-lg" gradientTransform="rotate(90)">
      <stop offset="5%" stop-color="rgba(31,133,214,.5)" />
      <stop offset="95%" stop-color="rgba(31,133,214,0.01)" />
    </linearGradient>
  </defs>
</svg>

Then in CSS I got the fill selector for the element I need (in my case it was subplot x4y4)

#candles .x4y4 .js-fill {
  fill: url(#atr-lg) !important;
}

But would be defo nice to be able to use a linear-gradient straight from when the plot is rendered. I know linear-gradient CSS is not supported for svg's and you have to define your own <linearGradient /> element but you could allow an option for its definition...like this

...
fillcolor="""
<linearGradient gradientTransform="rotate(90)">
  <stop offset="5%" stop-color="rgba(31,133,214,.5)" />
  <stop offset="95%" stop-color="rgba(31,133,214,0.01)" />
</linearGradient>
"""
...

Then plotly can copy the user definition somewhere relevant in the html and it can add some uid as id to reference in the <path style="fill: url(#someuid)" />

[gvwilson]

Hi - we are trying to tidy up the stale issues and PRs in Plotly's public repositories so that we can focus on things that are still important to our community. Since this one has been sitting for a while, I'm going to close it; if it is still a concern, please add a comment letting us know what recent version of our software you've checked it with so that I can reopen it and add it to our backlog. Alternatively, if it's a request for tech support, please post in our community forum. Thank you - @gvwilson