Color gradient for bars in Bar Charts

[COLLINETTEBastien]

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!

[archmoj]

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]

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]

related: #1918

[gmilano90]

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 ?

Hello, I need to color the bars like that but I don't know how to do it. Could you help me?

[archmoj]

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 ?

Hello, I need to color the bars like that but I don't know how to do it. Could you help me?

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]

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 ?

Hello, I need to color the bars like that but I don't know how to do it. Could you help me?

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

Thanks!

[NickCis]

I'll try to give a shot at this. But, I'm rather new to plot.ly, I'll need some help:

1. What would be the intended JSON configuration in order to create this kind of bar graph? (There is already a marker.color.colorscale configuration used, check the bar-colorscale-colorbar example / test, so it shouldn't conflict with that).
2. I'm thinking of two types of approaches:
   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]

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