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

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

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

Hi @alexcjohnson and thanks for your work on Plotly.

In issue #581, in 2018, you propose a solution where this feature is added to scattergl. Is there a timeline for this change to be made?

Is it safe to assume that if support for colorscale on a line does not exist in plotly.js it similarly does not exist in

It’s not on our roadmap at this point. If anyone wants to work on it we’d be glad to help by reviewing a PR and helping write tests. Or if an org with budget would like to sponsor the feature we’d be happy to discuss.

That’s correct, is simply a wrapper around plotly.js, so it can make certain things easier but can’t create anything that’s fundamentally not supported by plotly.js.