Plotly.js: Rotate 3D axis labels

[alexcjohnson]

Long axis titles on 3D scenes overlap the tick labels and data, because they're simply centered on a point outside the axis and not rotated:

Our test images don't include a lot of long 3d titles, but you can see this effect a little bit in gl3d_world-cals

Feels like the easiest solution - which is also consistent with our 2D axis titles - would be to rotate these labels parallel to the axis. But potentially 1-letter titles ("X" etc) should remain unrotated?

The degree of overlap also depends on the viewpoint, so the logic for where to put this relative to the axis line and tick labels probably needs a bit of adjustment:

[etpinard]

We could probably merge https://github.com/plotly/plotly.js/issues/511 with this new ticket.

[alexcjohnson]

good call. I'll close #511. Referencing http://community.plot.ly/t/axes-labels-overlapping-on-3d-surface-plot/859

[etpinard]

Feels like the easiest solution - which is also consistent with our 2D axis titles - would be to rotate these labels parallel to the axis. But potentially 1-letter titles ("X" etc) should remain unrotated?
The degree of overlap also depends on the viewpoint, so the logic for where to put this relative to the axis line and tick labels probably needs a bit of adjustment:

We could probably get away with simply adding scene.(x|y|z).titleangle (which could useful for cartesian y-axes as well) with a hard default of 0, without having to implement "auto" angle logic.

[alexcjohnson]

a titleangle attribute would let people (manually) fix the overlap for one particular camera angle, but as soon as the user starts rotating the scene, the overlap returns. The two options I see are (1) the title rotates to align with the axis, or (2) the title stays horizontal but changes to right-aligned on the left side and left-aligned on the right side. (1) is my strong preference as it's more compact (ie less likely to overflow the scene), and also helps guide your eye as to the representation of that variable.

[etpinard]

Closing after https://github.com/plotly/plotly.js/pull/3084 and https://github.com/plotly/plotly.js/pull/3131

[MeganBeckett]

Hi there! Is this now possible? ie. to make long axis titles lie parallel to the axes in 3d plots? It seems something has been developed, but I can't see how to implement in plotly (I'm also using plot_ly in R)?

[archmoj]

@MeganBeckett
Yes. The latest versions of plotly R/js/py do support auto rotation by default.
Also in case you may be interested in line breaks or using text formatting in 3D scenes, here is an example: https://rreusser.github.io/plotly-mock-viewer/#gl3d_formatted-text-on-multiple-lines