Y axis name rotation

Hello guys,
I have a small problem. I need to know if exists a way to rotate the name of the y axis of 90 degrees in plotly js.

Thank you!


Unforunately, there is no way to rotate axis titles at the moment.

One workaround will be to remove the native axis titles and use annotations instead to label your axes.


i can’t figure how to put a annotation on axis. There are a lot of examples for data value but for the axis how it’s work?

Thank you.

You’re right we don’t have any example of paper-referenced annotations on https://plot.ly/javascript/text-and-annotations/. Thanks for the headsup!

Here’s an example that should help get started: http://codepen.io/etpinard/pen/zrbwRx

1 Like

I have changed the plugin. If someone is interested i have done this changes

else if(axletter==='y'){ ya = cont; xa = (ya.anchor==='free') ? {_offset:gs.l+(ya.position||0)*gs.w, _length:0} : Plotly.Axes.getFromId(gd, ya.anchor); y = ya._offset+ya._length/2 + 10; //added +10 for shift the label downside x = xa._offset + ((ya.side==='right') ? xa._length + 10 + fontSize*(offsetBase + (ya.showticklabels ? 1 : 0.5)) : -10 - fontSize*(offsetBase + (ya.showticklabels ? 0.5 : 0))); options = {x: x, y: y, 'text-anchor': 'middle'}; transform = {rotate: '0', offset: 0}; // CHANGE HERE rotate changed from -90 to 0 if(!avoid.side) { avoid.side = 'left'; } }

I have changed the propriety transform rotate to 0 and added a +10 offset of the label.

For anyone trying to rotate your annotations just use use textangle

Here is an example:

1 Like

I managed to rotate and move y-axes titles by adding this to my css:

.infolayer [class^='y'][class$='title'] {
  transform: rotate(0deg) translate(30px, 135px);

hope this helps :slight_smile: