# ScatterGL line with different colors **URL:** \ **Category:** plotly.js\ **Created:** [May 22, 2020, 9:51am UTC](https://community.plotly.com/t/scattergl-line-with-different-colors/39905 "2020-05-22T09:51:05Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![tony](https://avatars.discourse-cdn.com/v4/letter/t/ee7513/32.png) [@tony](https://community.plotly.com/u/tony)\ **Post date:** [May 22, 2020, 9:51am UTC](https://community.plotly.com/t/scattergl-line-with-different-colors/39905/1 "2020-05-22T09:51:05Z")
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. ![zgbLK](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/8/837e9b92eaaf744b6afebda599e41d51a9b278c1.png) ---
**Author:** ![archmoj](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/archmoj/32/8388_2.png) [@archmoj](https://community.plotly.com/u/archmoj)\ **Post date:** [May 25, 2020, 2:26pm UTC](https://community.plotly.com/t/scattergl-line-with-different-colors/39905/2 "2020-05-25T14:26:07Z")
It seems `scatter3d` (kind of) handles arrays in `line.color`; but not `scatter` and `scattergl`. Here is a [demo](https://codepen.io/MojtabaSamimi/pen/ExVJWJL?editors=0010). @alexcjohnson wondering maybe we could enable `arrayOk` option for those two, if someone opens a feature request on plotly.js repo? ---
**Author:** ![alexcjohnson](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/alexcjohnson/32/614_2.png) [@alexcjohnson](https://community.plotly.com/u/alexcjohnson)\ **Post date:** [May 26, 2020, 3:32am UTC](https://community.plotly.com/t/scattergl-line-with-different-colors/39905/3 "2020-05-26T03:32:54Z")
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](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. ---
**Author:** ![tony](https://avatars.discourse-cdn.com/v4/letter/t/ee7513/32.png) [@tony](https://community.plotly.com/u/tony)\ **Post date:** [May 26, 2020, 2:13pm UTC](https://community.plotly.com/t/scattergl-line-with-different-colors/39905/4 "2020-05-26T14:13:18Z")
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. ---
**Author:** ![alexcjohnson](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/alexcjohnson/32/614_2.png) [@alexcjohnson](https://community.plotly.com/u/alexcjohnson)\ **Post date:** [May 26, 2020, 7:29pm UTC](https://community.plotly.com/t/scattergl-line-with-different-colors/39905/5 "2020-05-26T19:29:42Z")
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/](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! ---
**Author:** ![tony](https://avatars.discourse-cdn.com/v4/letter/t/ee7513/32.png) [@tony](https://community.plotly.com/u/tony)\ **Post date:** [May 27, 2020, 6:24am UTC](https://community.plotly.com/t/scattergl-line-with-different-colors/39905/6 "2020-05-27T06:24:19Z")
I can start working on it, but i’d need you to point me in the right direction ---
**Author:** ![houtanb](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/houtanb/32/12081_2.png) [@houtanb](https://community.plotly.com/u/houtanb)\ **Post date:** [August 2, 2020, 7:43pm UTC](https://community.plotly.com/t/scattergl-line-with-different-colors/39905/7 "2020-08-02T19:43:11Z")
Hi @alexcjohnson and thanks for your work on Plotly. In [issue #581](https://github.com/plotly/plotly.js/issues/581#issuecomment-433927625), 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 plotly.py? ---
**Author:** ![alexcjohnson](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/alexcjohnson/32/614_2.png) [@alexcjohnson](https://community.plotly.com/u/alexcjohnson)\ **Post date:** [August 2, 2020, 10:47pm UTC](https://community.plotly.com/t/scattergl-line-with-different-colors/39905/8 "2020-08-02T22:47:50Z")
> [@houtanb](#): > > Is there a timeline for this change to be made? 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. > [@houtanb](#): > > 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 plotly.py? 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`. ---
**Author:** ![Saratoga](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/saratoga/32/28634_2.png) [@Saratoga](https://community.plotly.com/u/Saratoga)\ **Post date:** [January 7, 2025, 10:59pm UTC](https://community.plotly.com/t/scattergl-line-with-different-colors/39905/9 "2025-01-07T22:59:35Z")
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 https://codepen.io/saratoga01/embed/preview/ogvpOJa?default-tabs=html%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=ogvpOJa ---
**Author:** ![Saratoga](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/saratoga/32/28634_2.png) [@Saratoga](https://community.plotly.com/u/Saratoga)\ **Post date:** [January 17, 2025, 1:06am UTC](https://community.plotly.com/t/scattergl-line-with-different-colors/39905/10 "2025-01-17T01:06:04Z")
With gradient in case you didn’t like the previous one https://codepen.io/saratoga01/embed/preview/vEBrMRx?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=vEBrMRx 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. > **[linear-gradient() - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient)** > > The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the data type, which is a special kind of .