add 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

[martinnikolov1]

I still can't add gradient on the graph

[rlhjansen]

I'm posting this here for my own future reference; It's not clear why this is done via a scatter, but if you're looking for a way to do it here's how:

under gradient fill there's an addition from 5.20

In the auto generated docs opacity via rgba instead of rgb is not specified

using this:

import plotly.graph_objects as go


fig = go.Figure(
    [
        go.Scatter(
            y=[1, 2, 3, 4],
            x=[3, 4, 8, 3],
            fill=None,
            mode="lines",
            line_color="black",
        ),
        go.Scatter(
            y=[1, 2, 3, 4],
            x=[1, 6, 2, 6],
            fill="tonexty",
            mode="lines",
            line_color="black",
            fillgradient=dict(
                type="vertical",
                colorscale=[(0.0, "rgba(255,0,0,1)"), (0.5,
                                                       "rgba(0,255,0,1)"), (1.0, "rgba(255,0,0,.5)")],
            ),
        ),
    ]
)

fig.show()

if you need multiple areas that are not connected you can use your_figure.add_traces() to add them separately from one another:

fig.add_traces([go.Scatter(...), go.Scatter(...)])

you can make this (gradient flowing top to bottom with different opacities/colors)

[AshKatzEm]

I've been getting the following error when using the new fillgradient property of go.Scatter in Dash.
pip show plotly
Name: plotly
Version: 5.24.1
Summary: An open-source, interactive data visualization library for Python
Home-page: https://plotly.com/python/
Author: Chris P
Author-email: [email protected]
License: MIT
Location: /.../venv/lib/python3.12/site-packages
Requires: packaging, tenacity
Required-by: dash

Simply running the example plot of fillgradient give the following error in dash:

ValueError: Invalid property specified for object of type plotly.graph_objs.Scatter: 'fillgradient'

Did you mean "fillpattern"?

Valid properties:
    cliponaxis
        Determines whether or not markers and text nodes are
        clipped about the subplot axes. To show markers and
        text nodes above axis lines and tick labels, make sure
        to set `xaxis.layer` and `yaxis.layer` to *below
        traces*.
    connectgaps
        Determines whether or not gaps (i.e. {nan} or missing
        values) in the provided data arrays are connected.
    customdata
        Assigns extra data each datum. This may be useful when
        listening to hover, click and selection events. Note
        that, "scatter" traces also appends customdata items in
        the markers DOM elements
    customdatasrc
        Sets the source reference on Chart Studio Cloud for
        `customdata`.
    dx
        Sets the x coordinate step. See `x0` for more info.
    dy
        Sets the y coordinate step. See `y0` for more info.
    error_x
        :class:`plotly.graph_objects.scatter.ErrorX` instance
        or dict with compatible properties
    error_y
        :class:`plotly.graph_objects.scatter.ErrorY` instance
        or dict with compatible properties
    fill
        Sets the area to fill with a solid color. Defaults to
        "none" unless this trace is stacked, then it gets
        "tonexty" ("tonextx") if `orientation` is "v" ("h") Use
        with `fillcolor` if not "none". "tozerox" and "tozeroy"
        fill to x=0 and y=0 respectively. "tonextx" and
        "tonexty" fill between the endpoints of this trace and
        the endpoints of the trace before it, connecting those
        endpoints with straight lines (to make a stacked area
        graph); if there is no trace before it, they behave
        like "tozerox" and "tozeroy". "toself" connects the
        endpoints of the trace (or each segment of the trace if
        it has gaps) into a closed shape. "tonext" fills the
        space between two traces if one completely encloses the
        other (eg consecutive contour lines), and behaves like
        "toself" if there is no trace before it. "tonext"
        should not be used if one trace does not enclose the
        other. Traces in a `stackgroup` will only fill to (or
        be filled to) other traces in the same group. With
        multiple `stackgroup`s or some traces stacked and some
        not, if fill-linked traces are not already consecutive,
        the later ones will be pushed down in the drawing
        order.
    fillcolor
        Sets the fill color. Defaults to a half-transparent
        variant of the line color, marker color, or marker line
        color, whichever is available.
    fillpattern
        Sets the pattern within the marker.
    groupnorm
        Only relevant when `stackgroup` is used, and only the
        first `groupnorm` found in the `stackgroup` will be
        used - including if `visible` is "legendonly" but not
        if it is `false`. Sets the normalization for the sum of
        this `stackgroup`. With "fraction", the value of each
        trace at each location is divided by the sum of all
        trace values at that location. "percent" is the same
        but multiplied by 100 to show percentages. If there are
        multiple subplots, or multiple `stackgroup`s on one
        subplot, each will be normalized within its own set.
    hoverinfo
        Determines which trace information appear on hover. If
        `none` or `skip` are set, no information is displayed
        upon hovering. But, if `none` is set, click and hover
        events are still fired.
    hoverinfosrc
        Sets the source reference on Chart Studio Cloud for
        `hoverinfo`.
    hoverlabel
        :class:`plotly.graph_objects.scatter.Hoverlabel`
        instance or dict with compatible properties
    hoveron
        Do the hover effects highlight individual points
        (markers or line points) or do they highlight filled
        regions? If the fill is "toself" or "tonext" and there
        are no markers or text, then the default is "fills",
        otherwise it is "points".
    hovertemplate
        Template string used for rendering the information that
        appear on hover box. Note that this will override
        `hoverinfo`. Variables are inserted using %{variable},
        for example "y: %{y}" as well as %{xother}, {%_xother},
        {%_xother_}, {%xother_}. When showing info for several
        points, "xother" will be added to those with different
        x positions from the first point. An underscore before
        or after "(x|y)other" will add a space on that side,
        only when this field is shown. Numbers are formatted
        using d3-format's syntax %{variable:d3-format}, for
        example "Price: %{y:$.2f}".
        https://github.com/d3/d3-format/tree/v1.4.5#d3-format
        for details on the formatting syntax. Dates are
        formatted using d3-time-format's syntax
        %{variable|d3-time-format}, for example "Day:
        %{2019-01-01|%A}". https://github.com/d3/d3-time-
        format/tree/v2.2.3#locale_format for details on the
        date formatting syntax. The variables available in
        `hovertemplate` are the ones emitted as event data
        described at this link
        https://plotly.com/javascript/plotlyjs-events/#event-
        data. Additionally, every attributes that can be
        specified per-point (the ones that are `arrayOk: true`)
        are available.  Anything contained in tag `<extra>` is
        displayed in the secondary box, for example
        "<extra>{fullData.name}</extra>". To hide the secondary
        box completely, use an empty tag `<extra></extra>`.
    hovertemplatesrc
        Sets the source reference on Chart Studio Cloud for
        `hovertemplate`.
    hovertext
        Sets hover text elements associated with each (x,y)
        pair. If a single string, the same string appears over
        all the data points. If an array of string, the items
        are mapped in order to the this trace's (x,y)
        coordinates. To be seen, trace `hoverinfo` must contain
        a "text" flag.
    hovertextsrc
        Sets the source reference on Chart Studio Cloud for
        `hovertext`.
    ids
        Assigns id labels to each datum. These ids for object
        constancy of data points during animation. Should be an
        array of strings, not numbers or any other type.
    idssrc
        Sets the source reference on Chart Studio Cloud for
        `ids`.
    legendgroup
        Sets the legend group for this trace. Traces part of
        the same legend group hide/show at the same time when
        toggling legend items.
    legendgrouptitle
        :class:`plotly.graph_objects.scatter.Legendgrouptitle`
        instance or dict with compatible properties
    legendrank
        Sets the legend rank for this trace. Items and groups
        with smaller ranks are presented on top/left side while
        with `*reversed* `legend.traceorder` they are on
        bottom/right side. The default legendrank is 1000, so
        that you can use ranks less than 1000 to place certain
        items before all unranked items, and ranks greater than
        1000 to go after all unranked items.
    line
        :class:`plotly.graph_objects.scatter.Line` instance or
        dict with compatible properties
    marker
        :class:`plotly.graph_objects.scatter.Marker` instance
        or dict with compatible properties
    meta
        Assigns extra meta information associated with this
        trace that can be used in various text attributes.
        Attributes such as trace `name`, graph, axis and
        colorbar `title.text`, annotation `text`
        `rangeselector`, `updatemenues` and `sliders` `label`
        text all support `meta`. To access the trace `meta`
        values in an attribute in the same trace, simply use
        `%{meta[i]}` where `i` is the index or key of the
        `meta` item in question. To access trace `meta` in
        layout attributes, use `%{data[n[.meta[i]}` where `i`
        is the index or key of the `meta` and `n` is the trace
        index.
    metasrc
        Sets the source reference on Chart Studio Cloud for
        `meta`.
    mode
        Determines the drawing mode for this scatter trace. If
        the provided `mode` includes "text" then the `text`
        elements appear at the coordinates. Otherwise, the
        `text` elements appear on hover. If there are less than
        20 points and the trace is not stacked then the default
        is "lines+markers". Otherwise, "lines".
    name
        Sets the trace name. The trace name appear as the
        legend item and on hover.
    opacity
        Sets the opacity of the trace.
    orientation
        Only relevant when `stackgroup` is used, and only the
        first `orientation` found in the `stackgroup` will be
        used - including if `visible` is "legendonly" but not
        if it is `false`. Sets the stacking direction. With "v"
        ("h"), the y (x) values of subsequent traces are added.
        Also affects the default value of `fill`.
    selected
        :class:`plotly.graph_objects.scatter.Selected` instance
        or dict with compatible properties
    selectedpoints
        Array containing integer indices of selected points.
        Has an effect only for traces that support selections.
        Note that an empty array means an empty selection where
        the `unselected` are turned on for all points, whereas,
        any other non-array values means no selection all where
        the `selected` and `unselected` styles have no effect.
    showlegend
        Determines whether or not an item corresponding to this
        trace is shown in the legend.
    stackgaps
        Only relevant when `stackgroup` is used, and only the
        first `stackgaps` found in the `stackgroup` will be
        used - including if `visible` is "legendonly" but not
        if it is `false`. Determines how we handle locations at
        which other traces in this group have data but this one
        does not. With *infer zero* we insert a zero at these
        locations. With "interpolate" we linearly interpolate
        between existing values, and extrapolate a constant
        beyond the existing values.
    stackgroup
        Set several scatter traces (on the same subplot) to the
        same stackgroup in order to add their y values (or
        their x values if `orientation` is "h"). If blank or
        omitted this trace will not be stacked. Stacking also
        turns `fill` on by default, using "tonexty" ("tonextx")
        if `orientation` is "h" ("v") and sets the default
        `mode` to "lines" irrespective of point count. You can
        only stack on a numeric (linear or log) axis. Traces in
        a `stackgroup` will only fill to (or be filled to)
        other traces in the same group. With multiple
        `stackgroup`s or some traces stacked and some not, if
        fill-linked traces are not already consecutive, the
        later ones will be pushed down in the drawing order.
    stream
        :class:`plotly.graph_objects.scatter.Stream` instance
        or dict with compatible properties
    text
        Sets text elements associated with each (x,y) pair. If
        a single string, the same string appears over all the
        data points. If an array of string, the items are
        mapped in order to the this trace's (x,y) coordinates.
        If trace `hoverinfo` contains a "text" flag and
        "hovertext" is not set, these elements will be seen in
        the hover labels.
    textfont
        Sets the text font.
    textposition
        Sets the positions of the `text` elements with respects
        to the (x,y) coordinates.
    textpositionsrc
        Sets the source reference on Chart Studio Cloud for
        `textposition`.
    textsrc
        Sets the source reference on Chart Studio Cloud for
        `text`.
    texttemplate
        Template string used for rendering the information text
        that appear on points. Note that this will override
        `textinfo`. Variables are inserted using %{variable},
        for example "y: %{y}". Numbers are formatted using
        d3-format's syntax %{variable:d3-format}, for example
        "Price: %{y:$.2f}".
        https://github.com/d3/d3-format/tree/v1.4.5#d3-format
        for details on the formatting syntax. Dates are
        formatted using d3-time-format's syntax
        %{variable|d3-time-format}, for example "Day:
        %{2019-01-01|%A}". https://github.com/d3/d3-time-
        format/tree/v2.2.3#locale_format for details on the
        date formatting syntax. Every attributes that can be
        specified per-point (the ones that are `arrayOk: true`)
        are available.
    texttemplatesrc
        Sets the source reference on Chart Studio Cloud for
        `texttemplate`.
    uid
        Assign an id to this trace, Use this to provide object
        constancy between traces during animations and
        transitions.
    uirevision
        Controls persistence of some user-driven changes to the
        trace: `constraintrange` in `parcoords` traces, as well
        as some `editable: true` modifications such as `name`
        and `colorbar.title`. Defaults to `layout.uirevision`.
        Note that other user-driven trace attribute changes are
        controlled by `layout` attributes: `trace.visible` is
        controlled by `layout.legend.uirevision`,
        `selectedpoints` is controlled by
        `layout.selectionrevision`, and `colorbar.(x|y)`
        (accessible with `config: {editable: true}`) is
        controlled by `layout.editrevision`. Trace changes are
        tracked by `uid`, which only falls back on trace index
        if no `uid` is provided. So if your app can add/remove
        traces before the end of the `data` array, such that
        the same trace has a different index, you can still
        preserve user-driven changes if you give each trace a
        `uid` that stays with it as it moves.
    unselected
        :class:`plotly.graph_objects.scatter.Unselected`
        instance or dict with compatible properties
    visible
        Determines whether or not this trace is visible. If
        "legendonly", the trace is not drawn, but can appear as
        a legend item (provided that the legend itself is
        visible).
    x
        Sets the x coordinates.
    x0
        Alternate to `x`. Builds a linear space of x
        coordinates. Use with `dx` where `x0` is the starting
        coordinate and `dx` the step.
    xaxis
        Sets a reference between this trace's x coordinates and
        a 2D cartesian x axis. If "x" (the default value), the
        x coordinates refer to `layout.xaxis`. If "x2", the x
        coordinates refer to `layout.xaxis2`, and so on.
    xcalendar
        Sets the calendar system to use with `x` date data.
    xhoverformat
        Sets the hover text formatting rulefor `x`  using d3
        formatting mini-languages which are very similar to
        those in Python. For numbers, see:
        https://github.com/d3/d3-format/tree/v1.4.5#d3-format.
        And for dates see: https://github.com/d3/d3-time-
        format/tree/v2.2.3#locale_format. We add two items to
        d3's date formatter: "%h" for half of the year as a
        decimal number as well as "%{n}f" for fractional
        seconds with n digits. For example, *2016-10-13
        09:15:23.456* with tickformat "%H~%M~%S.%2f" would
        display *09~15~23.46*By default the values are
        formatted using `xaxis.hoverformat`.
    xperiod
        Only relevant when the axis `type` is "date". Sets the
        period positioning in milliseconds or "M<n>" on the x
        axis. Special values in the form of "M<n>" could be
        used to declare the number of months. In this case `n`
        must be a positive integer.
    xperiod0
        Only relevant when the axis `type` is "date". Sets the
        base for period positioning in milliseconds or date
        string on the x0 axis. When `x0period` is round number
        of weeks, the `x0period0` by default would be on a
        Sunday i.e. 2000-01-02, otherwise it would be at
        2000-01-01.
    xperiodalignment
        Only relevant when the axis `type` is "date". Sets the
        alignment of data points on the x axis.
    xsrc
        Sets the source reference on Chart Studio Cloud for
        `x`.
    y
        Sets the y coordinates.
    y0
        Alternate to `y`. Builds a linear space of y
        coordinates. Use with `dy` where `y0` is the starting
        coordinate and `dy` the step.
    yaxis
        Sets a reference between this trace's y coordinates and
        a 2D cartesian y axis. If "y" (the default value), the
        y coordinates refer to `layout.yaxis`. If "y2", the y
        coordinates refer to `layout.yaxis2`, and so on.
    ycalendar
        Sets the calendar system to use with `y` date data.
    yhoverformat
        Sets the hover text formatting rulefor `y`  using d3
        formatting mini-languages which are very similar to
        those in Python. For numbers, see:
        https://github.com/d3/d3-format/tree/v1.4.5#d3-format.
        And for dates see: https://github.com/d3/d3-time-
        format/tree/v2.2.3#locale_format. We add two items to
        d3's date formatter: "%h" for half of the year as a
        decimal number as well as "%{n}f" for fractional
        seconds with n digits. For example, *2016-10-13
        09:15:23.456* with tickformat "%H~%M~%S.%2f" would
        display *09~15~23.46*By default the values are
        formatted using `yaxis.hoverformat`.
    yperiod
        Only relevant when the axis `type` is "date". Sets the
        period positioning in milliseconds or "M<n>" on the y
        axis. Special values in the form of "M<n>" could be
        used to declare the number of months. In this case `n`
        must be a positive integer.
    yperiod0
        Only relevant when the axis `type` is "date". Sets the
        base for period positioning in milliseconds or date
        string on the y0 axis. When `y0period` is round number
        of weeks, the `y0period0` by default would be on a
        Sunday i.e. 2000-01-02, otherwise it would be at
        2000-01-01.
    yperiodalignment
        Only relevant when the axis `type` is "date". Sets the
        alignment of data points on the y axis.
    ysrc
        Sets the source reference on Chart Studio Cloud for
        `y`.