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.
Thanks.
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?
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?
Thanks.
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!
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, plotly.py 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.
4 years and it seems that they still haven’t found a solution to this problem, I’ll leave you with a simple solution for those who are still interested and if someone wants to sponsor me to add it to the code XD, just kidding
With gradient in case you didn’t like the previous one
It could possibly also be done using CSS styles. Here is the link to the CSS linear-gradient() function in case anyone is interested in trying this option.
