Can't find a way to disable hovertext automatic rotation

[desertdev]

I have a horizontal bar chart using hover text that is automatically being rotated about 45 degrees, which I don't want. I've been combing through the API full reference and existing issues (open and closed), but have not found any way to change this:

One detail in the data: there are 2 traces being charted, one in blue and one in grey. Initially all the data was in a single trace and I didn't have this problem. But both traces have identical options set for the hovertext:

            hoverinfo: 'y+text',
            hovertext: [],
            hoverlabel: {
                bordercolor: 'rgb(100, 100, 100)',
                bgcolor: 'rgb(240, 240, 240)',
                namelength: 0
            }

Am I just missing something or is it not possible to avoid this rotation? There seems to be plenty of room for the hovertext, and even if I reduce the text content to a very short string on a single line it still wants to do the rotation now that I split it into 2 traces.

[etpinard]

You're right, we don't expose a way to set the hover label rotation at the moment.

I guess we could add something like:

hoverlabel: {
  angle: 90 // or [10, 90, 45] one item per-pt
}

but that might not cover all the current label rotation logic.

[desertdev]

Thank you for the response. My workaround was to use a single data trace and change colors as needed programmatically. This doesn't cause rotation, as apparently the function hoverAvoidOverlaps can see there is more room available in the total chart with a single data trace.

[adrianoesch]

+1 for the angle parameter at the hoverlabels.

[eliasdabbas]

+2

The solution that @desertdev proposes works. However, in the case I'm working on right now, I need to have several traces, because I want to map different colors to different categorical variables, and it's quite difficult to read at 45 and -45 degrees.

Exposing the logic under hoverlabel would be great!
Thanks

[chubukov]

+3

If you have a horizontal bar chart with grouped bars and multiline labels the rotation can make it look truly awful.

(This example works totally fine as a vertical bar chart)

[etpinard]

@chubukov I think you might have discovered a bug, or possible another manifestation of #3050

Would you mind sharing a reproducible codepen to help us debug?

[chubukov]

@etpinard Sure, I put an example here https://plot.ly/~victor.chubukov/18/

[alexcjohnson]

This is an extreme example of what I posted in #3050 (comment) and I said:

in this image, we could push min and q1 down so the rotated edge of their boxes align with the rotated edge of the median box perhaps?

That would fix the green label here, but I guess the fact that the orange label crosses the blue shows there's more needed - in principle all the labels except the farthest-right would need to be pushed down somewhat, though we should be careful not to push them down any more than we need do or they could easily drop off the bottom of the plot...

Simply disabling this rotation (which we do if you switch to hovermode: 'closest') isn't a very complete solution though - there are lots of situations then in which one label would overlap either another label, the starting point of another label, or other data you're hovering on.

[chubukov]

@alexcjohnson thanks for the tip -- hovermode: 'closest' is actually ok for my use case.

[jackparmer]

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.

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.

[gvwilson]

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