Color gradient for bars in Bar Charts #5238
Description
Hello !
I am currently working with Bar Charts and I noticed that Plotly JS doesn't support the possibility to have bars with a color gradient effect.
It could be manipulated by having a start color (that would be the current color parameter) and an end color (optional, default would be current color, equivalent to no color gradient).
If the end color is defined, the gradient could be adjusted with an offset value (between 0 and 1? 0 for the start color, 1 for the end color).
Would it be possible to implement that (maybe in a different way)?
Thank you very much for your hard work!
Activity
archmoj commentedon Oct 28, 2020
Something similar to
https://rreusser.github.io/plotly-mock-viewer/#bar-colorscale-colorbar
or
https://rreusser.github.io/plotly-mock-viewer/#bar-marker-line-colorscales
?
COLLINETTEBastien commentedon Oct 28, 2020
Not really.
I was thinking about something like what we can do with LaTeX bar charts
https://tex.stackexchange.com/questions/455333/latex-horizontal-bar-chart-gradient-color-for-bars
or with ChartJS :
https://stackoverflow.com/questions/60679709/chart-js-add-gradient-to-bar-chart
I hope to be clear enough.
alexcjohnson commentedon Oct 28, 2020
related: #1918
gmilano90 commentedon Nov 16, 2021
Hello, I need to color the bars like that but I don't know how to do it. Could you help me?
archmoj commentedon Nov 16, 2021
Please have a look at the mock which is at https://github.com/plotly/plotly.js/blob/master/test/image/mocks/bar-marker-line-colorscales.json
gmilano90 commentedon Nov 16, 2021
Thanks!
NickCis commentedon Feb 17, 2023
I'll try to give a shot at this. But, I'm rather new to plot.ly, I'll need some help:
marker.color.colorscaleconfiguration used, check thebar-colorscale-colorbarexample / test, so it shouldn't conflict with that).a. Define a svg linear gradient per bar (the start stop of all gradients should be the same and the end stop should be calculated according the trace / bar value)
b. Use only one linear gradient (the same as the scale), change trace / bars size to be full height / width and apply a clip path in order to show the correct size.
What do you think about this?. I would appreciate any tips!
gvwilson commentedon Jul 4, 2024
Hi - we are trying to tidy up the stale issues and PRs in Plotly's public repositories so that we can focus on things that are still important to our community. Since this one has been sitting for several years, I'm going to close it; if it is still a concern, please add a comment letting us know what recent version of our software you've checked it with so that I can reopen it and add it to our backlog. Thanks for your help - @gvwilson