Repository navigation
Line colorscale on scatter graph #581
Description
Hello,
I can't make work the marker.line.colorscale property. I'm not sure how it should work, but what I can say is:
- using the
colorscaleproperty on lines as it is used on markers has no effect - if we use the property on a scatter graph with both lines and markers we have a bug (or I'm not using it properly?)
So is it possible to color a line following a colorscale on a scatter graph? How we do it?
Moreover the documentation is confusing, as it states the property line is under the mark one:
Sets the colorscale and only has an effect if
marker.line.coloris set to a numerical array.
Actually it seems not to be the case: http://codepen.io/anon/pen/OXJErp. Should the documentation states line.color instead?
I can do a PR to fix the doc, but I want to be sure I'm not misleading first.
Activity
MonsieurV commentedon May 30, 2016
Seems like the feature was already suggested in #147 see
etpinard commentedon May 30, 2016
Thanks for the very detailed issue.
In plotly.js, attributes under
marker.linedescribe the marker points' bordering line styling (example here) and have no effect on ascattertrace's line segments.At the moment, scatter
lineattributes do not support color scales nor per-data-point style setting (as mentioned in #147). In other words, there is no way to apply a colour gradient to a plotly.js line chart.Adding color scale support to line charts (possibly using svg gradient) would be a great addition to the library.
etpinard commentedon May 30, 2016
We should also add this feature for
scatter3dtraces e.g.from here.
etpinard commentedon May 30, 2016
Assigning the
scatter3dpart to @monferamonfera commentedon Jun 2, 2016
A comment about SVG (note: no plotly support at the moment) which underlies the regular plots that don't use WebGL:
<line>tag<line>tags, with the caveat that the miters would have to be handled, i.e. a<polyline>or equivalent<path>tag withlineTosegments, containing N line sections will map to 2*N DOM elements (a<line>and a two-section<polyline>for each). If the line width is no more than 1px, then the miters can be omitted. The benefit with a separate DOM element for each line section is that the thickness can also be varied; in this case, we'd need to use a thin, long quadrilateral<polygon>rather than a<line>for each line section.There are techniques for gradient coloring (or similarly, varying thickness) for general SVG curves along their running length, but they involve the slicing of the original curve, as this example does.
timelyportfolio commentedon Jun 2, 2016
@monfera, perhaps related http://bl.ocks.org/pbeshai/ffd0f9d84b4e8df27db2
monfera commentedon Jun 2, 2016
@timelyportfolio these things look fantastic, and they show width variation too! The gradients are implemented as in the third point, i.e. the whole path has one gradient vector (example defaults to horizontal), which works as the trace points are in a strictly monotonic order when projected to the given gradient vector.
monfera commentedon Jun 2, 2016
The SVG gradient technique is suitable not only for actual gradients, but discontinuous steps at arbitrary points with arbitrary colors just by specifying a new color at the same stop value, see it e.g. here: http://codepen.io/monfera/pen/JKoVvJ?editors=1000
monfera commentedon Jun 3, 2016
WebGL: most shaders do color interpolation; it is also the case with our underlying
gl-line3d(see new example). We need to expose it. A PoC fromplotly.jsunder development, where some segments are gradient colored, and some have a fixed color:plotly#581 adding full-blown color specification to the scatter3d lin…
plotly#581 adding a scatter3d mock json and png with colorful lines
plotly#581 colorspec corrections and clarifications
plotly#581 adding full-blown color specification to the scatter3d lin…
80 remaining items
acharyatilak commentedon Oct 27, 2018
Any update on adding colorscale functionality to Scatter (in 2D) ?
brockelmore commentedon Oct 28, 2018
Hard to believe this has remained open for 2.5 years. What is the main hold up? This seems like a core function to graphing. I've been messing around with trying to alter via d3 but it is an extreme pain.
monfera commentedon Oct 28, 2018
Not all data visualization packages have this feature, and my completely uninformed guess would be that there hasn't been strong demand for this specific function on client projects so far. On the off chance it's useful for covering this or larger functional gaps, Plotly has a page where users can directly engage in feature work, or alternatively, PR suggestions can be discussed and then implemented, there are several features that were added in large part by users.
brockelmore commentedon Oct 29, 2018
Sorry if I came off rude - just seems like a lot of other projects, Chart.js, Highcharts, etc. have this functionality. I view color gradients and line width as third and fourth dimensions without the complications of actually being in that high dimensionality. And it seems like there are a ton of applications for it so I am just surprised. I don't have $15,000 to spend on this feature, I work with a tiny startup currently. I will check out if I can help but I haven't grokked the system so knowing the ins and outs will take some time.
alexcjohnson commentedon Oct 29, 2018
@brockelmore as you alluded to above, this is an extreme pain with D3 - ie SVG. There are straightforward solutions for a few cases, like a color gradient that's purely a function of x or y coordinate, but of course this doesn't add any new information to the chart, it's purely aesthetic. Beyond these cases we would need to specify lines as filled paths, rather than stroked lines, which is both annoying to compute (at least for splines) and prone to antialiasing problems where separate paths meet. I suspect for the most general case there is actually no solution we'd be completely happy with in SVG.
But in WebGL it's manageable, which is why line color gradients were added to
scatter3da long time ago. Now thatscatterglis nearly up to par with (SVG)scatter, I would propose adding it there and saying "if you want line color and width gradients, usescattergl."etpinard commentedon Oct 29, 2018
I'm a big fan of this proposed solution 👌
brockelmore commentedon Oct 29, 2018
Sounds great, I am going to stick around plotly and hopefully learn the systems and contribute when I can. For the record, "purely aesthetic" is an entirely valid reason to add a feature, especially when visualization is the core functionality of the project (and any way to accomplish that, such as WebGL, is fine)!
gullpavon commentedon Apr 28, 2020
If one were to want to display a gradient line on a line chart (purely for aesthetics purposes) , is that possible?
archmoj commentedon Aug 31, 2020
@alexcjohnson should we rename the issue title to include
scatterglinstead ofscatter?jackparmer commentedon Sep 10, 2020
This issue has been tagged with
NEEDS SPON$ORA community PR for this feature would certainly be welcome, but our experience is deeper features like this are difficult to complete without the Plotly maintainers leading the effort.
Sponsorship range: $10k-$15k
What Sponsorship includes:
Please include the link to this issue when contacting us to discuss.
alexlenail commentedon Jun 10, 2021
Just here to note that I'd love to see this feature available in 2D.
gvwilson commentedon Jun 5, 2024
Hi - this issue has been sitting for a while, so as part of our effort to tidy up our public repositories I'm going to close it. If it's still a concern, we'd be grateful if you could open a new issue (with a short reproducible example if appropriate) so that we can add it to our stack. Cheers - @gvwilson