Y axis name rotation

plotly.js
1

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!

3 Likes
2

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.

2 Likes
3

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.

4

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
5

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.

6

For anyone trying to rotate your annotations just use use textangle

Here is an example:

1 Like
7

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:

2 Likes