support arrays of color and colorscale for line and fillcolor of plotly.graph_objects.Scatter #5259

Activity

1. nicolaskruchten commented on Nov 10, 2020

   

   nicolaskruchten

   on Nov 10, 2020

   Contributor

   More actions

   These are both good ideas although a bit trickier to implement because these arrays wouldn't have the same lengths as the others in the trace: the line.color would be 1 element shorter, and the fillcolor one would be different again. I'm actually not clear what kind of plot you'd like to make with variable fillcolor :)
2. alexcjohnson commented on Nov 10, 2020

   

   alexcjohnson

   on Nov 10, 2020

   Collaborator

   More actions

   I'm guessing the variable fillcolor would be like https://stackoverflow.com/a/59950664/9188800
   

   The line case is covered in #581 - short answer: big pain in SVG, more manageable in scattergl. I'd say the same goes for variable fillcolor

   @nicolaskruchten I guess it could either be 1 element shorter or the same length, depending on exactly what you want the color to mean, and whether you want a smooth variation or a single color per segment. There may be use cases for both, and neither is particularly easy in SVG.
3. jleaves commented on Nov 22, 2020

   

   jleaves

   on Nov 22, 2020

   Author

   More actions

   These are both good ideas although a bit trickier to implement because these arrays wouldn't have the same lengths as the others in the trace: the line.color would be 1 element shorter, and the fillcolor one would be different again. I'm actually not clear what kind of plot you'd like to make with variable fillcolor :)

   Sorry for the late reply.

   I was trying to plot shapes with different colors. Each polygon (plotly.graph_objects.Scatter.fillcolor) comes with a numeric property which I want to illustrate by the "fill" color. Furthermore, the common boundary of two polygons (plotly.graph_objects.Scatter.line) also has a numeric property which I want to illustrate (now maybe by "width", but support for "color" may be helpful as well).

   The simplist graph would look like this:

   

   Currently, I have to write my own "color mapping" function, something like the function map_z2color in this section. With regards to my specific application, I successfully work around this issue with the above method.

   But still, I guess my naive method may have performance issues as I have to manually produce a string of color for every polygon and every boundary. So maybe the "feature request" is still a good improvement? Any suggestions?

   👍React with 👍2Reacted by Kathryn Hurchla and Daniel Ciaravino
4. ryani commented on Dec 21, 2020

   

   ryani

   on Dec 21, 2020

   More actions

   I'm also interested in this feature. I'd like the lines to change color via something like the heatmap z component. I'd actually prefer gradient lines (blending between the values at each point) but using the z value of the start or end point would be fine.

   My use case is scatter lines representing 2d data over time, and I want the trail to fade out as the points get further in the past.

   👍React with 👍2Reacted by GILLES Armand and Kathryn Hurchla
5. nicolaskruchten

   added

   ♥ NEEDS SPON$OR

   on Jan 4, 2021
6. yotkadata commented on Aug 15, 2023

   

   yotkadata

   on Aug 15, 2023

   Last edited by yotkadata

   More actions

   It would be really great to be able to use arrays/lists of colors for line and fillcolor. I am currently working on an interactive version of my MeteoHist App and I could've really used this feature. Instead, I ended up adding 365 traces to my Plot - one for every day of the year. This might serve as a workaround for others:

   With a bar chart, I could get more or less what I want in one trace (code from inside a class):

   # Define opacity depending on whether peak alpha is enabled
   opacity = (
       self.df_t[f"{self.year}_alpha"]
       if self.settings["peak_alpha"]
       else np.ones(len(self.df_t))
   )
   
   # Get colorscale from method
   # Results in an array of colors the same length as self.df_t
   colors = self.get_colorscale()
   
   # Display a simpler and faster plot if chart_type is "bar"
   if chart_type == "bar":
       fig.add_trace(
           go.Bar(
               x=self.df_t["date"],
               y=self.df_t[f"{self.year}_diff"],
               base=self.df_t["mean"],
               marker=dict(
                   color=colors,
                   line_width=0,
                   opacity=opacity,
               ),
           )
       )
   
       return fig

   

   But I like much better to draw an area between the mean and the current value. Since I can't use the color array directly, I have to create many "shapes" (actually they are Scatter traces):

   # For each day, add a filled area between the mean and the year's value
   for i in range(len(self.df_t) - 1):
       # Define x and y values to draw a polygon between mean and values of today and tomorrow
       date_today = self.df_t["date"].iloc[i]
       date_tomorrow = self.df_t["date"].iloc[i + 1]
       mean_today = self.df_t["mean"].iloc[i]
       mean_tomorrow = self.df_t["mean"].iloc[i + 1]
       value_today = self.df_t[f"{self.year}"].iloc[i]
       value_tomorrow = self.df_t[f"{self.year}"].iloc[i + 1]
   
       # If one day is above and the other below the mean, set the value to the mean
       if (value_today > mean_today) ^ (value_tomorrow > mean_tomorrow):
           value_tomorrow = mean_tomorrow
   
       fig.add_trace(
           go.Scatter(
               name=f"Daily value {self.df_t['date'].iloc[i].strftime('%d.%m.%Y')}",
               x=[date_today, date_today, date_tomorrow, date_tomorrow],
               y=[mean_today, value_today, value_tomorrow, mean_tomorrow],
               line_width=0,
               fill="toself",
               fillcolor=colors[i],
               showlegend=False,
               mode="lines",
               opacity=opacity[i],
               hoverinfo="skip",
           )
       )
   
   return fig

   

   In the end this works, but it's quite slower performance-wise and also feels more "hacky".
7. gvwilson

   self-assigned this

   on Jul 5, 2024
8. gvwilson

   removed their assignment

   on Aug 2, 2024
9. gvwilson

   removed

   ♥ NEEDS SPON$OR

   on Aug 2, 2024
10. gvwilson

    changed the title [-][Feature Request] Support arrays of color and colorscale for line and fillcolor of `plotly.graph_objects.Scatter`[/-] [+]support arrays of color and colorscale for line and fillcolor of `plotly.graph_objects.Scatter`[/+] on Aug 9, 2024
11. gvwilson

    added

    featuresomething newsomething new

    P3backlogbacklog

    on Aug 9, 2024
12. dewi-ny-je commented on Sep 24, 2026

    

    dewi-ny-je

    on Sep 24, 2026

    Last edited by dewi-ny-je

    More actions

    I am interested in a feature to have lines graphs be plotted with colours depending on Y value, like this:

    

    or this (energy prices, plotted with Apexcharts):

    

    Am I right in posting here? or should I open a new issue ticket?

    For context: I asked Claude before searching for similar requests, and it seems it would not be involved:

    ---

    Area graphs: works today

    Scatter traces have a fillgradient attribute (src/traces/scatter/attributes.js:387). Set it to type: 'vertical' and give start/stop in y-axis units. Colour scales accept the same position twice, so a scale can switch colour sharply instead of blending. That makes thresholds possible:

    // thresholds 2 and 4, gradient spans y = 0..6
    fillgradient: {
      type: 'vertical', start: 0, stop: 6,
      colorscale: [[0, base], [2/6, base], [2/6, 'orange'],
                   [4/6, 'orange'], [4/6, 'red'], [1, 'red']]
    }

    Lines and stepped lines: needs a new attribute

    line.color takes one colour only. The drawing helper behind fillgradient (gradientWithBounds in src/components/drawing/index.js:462) can already colour a line instead of a fill. So the feature would mostly reuse existing code:

    • New attributes: add them to the scatter line settings, plus their defaults in line_defaults.js.
    • Drawing: call the existing helper on the line, in the same way the fill code does.
    • Other pieces:
      • the legend icon;
      • image tests (a human must generate the reference images);
      • a changelog file in draftlogs/;
      • a rebuild of the generated schema.

    It would work for all line shapes, including hv, vh, hvh, vhv and spline. It would not cover the WebGL version (scattergl), and stacked areas would be coloured by their stacked height.

    For the settings, I suggest a line.gradient that copies fillgradient (type, start, stop, colorscale). That keeps the API consistent, and plotly.js puts consistency first. Your threshold list could be added on top of that as an easier way to write the stepped colour scale. The maintainers should decide on that part.
13. camdecoster commented on Sep 29, 2026

    

    camdecoster

    on Sep 29, 2026

    Contributor

    More actions

    @dewi-ny-je could you please open a new feature request and reference this one in that? Your idea is related to this one, but I think should be tracked separately.
14. dewi-ny-je commented on Sep 30, 2026

    

    dewi-ny-je

    on Sep 30, 2026

    More actions

    #8093 done

    If approved I can provide a PR

    👍React with 👍1Reacted by Cameron DeCoster