Plotly.js: allow for horizontal colorbar

[mg1075]

_feature request:_ horizontal colorbar for heatmap, 3d graphs, etc.

The api for the colorbar seems to only allow for a colorbar positioned _vertically_.

But what if someone wants the bar displayed _horizontally_?
As far as I can tell from the api, this is not possible, but it would be nice to have.

[isokrates]

This would be great—it would make things centre on the page in a much more visually appealing way!

[cdsontag]

This would be a great benefit to the JWST ETC project. With the colorbar vertical, any variation in the number of sig. figs shown for the colorbar numerical tick values change the width of the whole area.

[antoinerg]

@divyachandran-ds brought this issue to my attention.

I think that allowing colorbars to have an horizontal orientation would be really useful as well as tight control of their position to not waste (sometimes very precious) space.

We should aim to reproduce a figure like this one:

[huangzhenyu]

when this issue could be solved? it have been 2years

[chriddyp]

If your organization has a software budget and needs this feature, you can prioritize & sponsor the development of it by reaching out to our team: https://plot.ly/products/consulting-and-oem/. Much of our development is funded this way.

Otherwise, we'll update this issue when it's planned for an upcoming release. There are no updates at this moment and it is still a good idea.

[Z-me]

I applied CSS forcibly because this issue is not solved... 😢

Since this way has a heavy browser load, I want you to create a property that makes this horizontal ColorBar quickly. 🙇

[JeroneGagliano]

Agree with @antoinerg. This also helps when the corresponding plot changes height based on the data (eg time-series heatmap) and the vertical bar can get cut off.

[theodcr]

@JeroneGagliano for your issue you can set the layout height and yaxis domain according to the size of your data, but I agree a horizontal colorbar would be more convenient.

[rusiano]

+1

[elmargasimov]

+1

[essafik]

I applied CSS forcibly because this issue is not solved... 😢

Since this way has a heavy browser load, I want you to create a property that makes this horizontal ColorBar quickly. 🙇

@Z-me Is that a workaround for the heatmap? If yes, could you share how you managed to get it?

[nicolaskruchten]

This issue has been tagged with NEEDS SPON$OR

A 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:

• Completion of this feature to the Sponsor's satisfaction, in a manner coherent with the rest of the Plotly.js library and API
• Tests for this feature
• Long-term support (continued support of this feature in the latest version of Plotly.js)
• Documentation at plotly.com/javascript
• Possibility of integrating this feature with Plotly Graphing Libraries (Python, R, F#, Julia, MATLAB, etc)
• Possibility of integrating this feature with Dash
• Feature announcement on community.plotly.com with shout out to Sponsor (or can remain anonymous)
• Gratification of advancing the world's most downloaded, interactive scientific graphing libraries (>50M downloads across supported languages)

Please include the link to this issue when contacting us to discuss.

[essafik]

Maybe I am missing something and I would like to understand where the difficulty resides. Can someone explain to me why implementing this feature is particularly difficult? From my perspective, it is simply a pi/2 rotation of the colorbar with a repositioning. So far, when I really need to have the colorbar horizontal, I just export my graph in svg and do the manipulation manually in Inkscape. It's not practical when having many graphs to do but it does the trick for now. From this manipulation, one can see that the colorbar is a seperate element from the graph so it should be possible to give us a way to rotate and choose the position of the colorbar.

[nicolaskruchten]

Indeed graphically it's solely a question of rotation. The complexity lies partly in the automatic tick-label orientation, and in the interaction between the color bar, tick label lengths and the plot margins. If you have a color bar with long tick labels below a chart with long tick labels, there's a fair bit of interplay that we need to take into account to ensure that the tick labels don't overlap each other, or overlap the color bar, or run off the end of the plot.

We would love a pull request for this feature if you feel you're able to easily put together a solution :)