💸 Reduce costs by consolidating proprietary analytics & reporting software to open-source & Dash.
Challenge us to replace your analytics with Dash and reduce costs.

ScatterGL line with different colors

Hi, i’m new to this forum. I have a very quick question in regards to plotly.js and scatter GL lines.
Is there a way to obtain this effect where defined a Y threshold value the trace will split in 2 colors?
I know i can create 2 separate traces but that’s not what i’m after. I’m looking for a way to do it with 1 single trace object and with scatterGL line type.
I also know, by searching through this forum, that it has been asked many times, so i’m wondering if any progress was made on this matter and/or if there’s a plan to add this functionality.


It seems scatter3d (kind of) handles arrays in line.color; but not scatter and scattergl.
Here is a demo.
@alexcjohnson wondering maybe we could enable arrayOk option for those two, if someone opens a feature request on plotly.js repo?

We could certainly build support for this into scattergl, but I don’t know of a clean way to do it with the SVG version - see for example https://stackoverflow.com/questions/14633363/can-i-apply-a-gradient-along-an-svg-path

Note that the effect of an array line.color would be a little different from what @tony shows in that image - it would give a gradient between blue at one point and red at the next, or perhaps there would be a mode with a segment that’s exactly half blue and half red. But what’s shown is a line that changes color at whatever point it crosses zero, even if that’s 90% of the way from one point to the next (eg point 3) or precisely at the beginning of the segment (eg 26->27).

It may be possible to create something like line.colorscale (and line.colordirection or something to say “apply this scale in the y direction”) which on the SVG side we’d apply with a gradient stroke, behavior which of course webgl could copy. That would give exactly the effect desired here, and has a clear implementation in both svg and webgl, though array line.color could of course do lots of things that line.colorscale can’t.

Hi @archmoj and @alexcjohnson ,
thanks for your quick reply.
A gradient at any point between points A and B wouldn’t really be useful, at least in my case.
I was more thinking about something like the picture i posted, where the part of the trace below the threshold line is a different color than the part above, regardless if the intersection is at 50% or 90% of the distance between one point to the next. Is there any chance to have this kind of feature? Is there anything i can do to help?

It’s not something Plotly devs are likely to work on in the near future, unless your org has budget to sponsor the feature https://plotly.com/consulting-and-oem/

But we’d happily accept a PR to add this feature, if you’re interested in working on it yourself!

I can start working on it, but i’d need you to point me in the right direction