Rotating not working well for me

[dfrankow]

Thanks for your work on this plugin. I'm afraid it isn't going well for me.

On chrome 20.0.1132.43 beta, the fonts spill outside the visible region. Screenshot: http://goo.gl/1PRdf. This might be due to the fact that I make my fonts bigger, although I tried to change them back to regular size.

On Safari 5.1.7, all the characters seem to pile on top of each other. Screenshot: http://goo.gl/ngYYl. This is default Safari, without any changes to font sizes or other settings.

Complete tarball of my example: http://goo.gl/jedlx

These are for rotateTicks: 135. I've tried other settings, and they have similar problems.

[ghost]

Thanks for this greate plugin. I have the same issues as reported with Safari and I'm rotating it at the same angle.
All other browsers works weel for me.

[gevansmd]

I'm having the same trouble in Chrome 36.0.1985.125 m, Firefox 29.0.1 and IE 11.0.9600.17207. My labels are cut off at the bottom of all labels and on the rightmost label half is cut off. For example 2033 appears as 20. Varying the angle between 15 to 115 degrees produced variations of the same problem. 115 degrees was completely unreadable with others cut off to at least some degree. Here is an example using 45 degrees on IE. It looks the best here with only the rightmost label cut off.

[gevansmd]

Here's the same graph on Firefox:

And Chrome:

[jnel899]

I found a super easy fix to the bottom of the labels being cut off. This was the only issue bothering me and I thought others may find it useful.
Change line 142 of the tickrotor file from:
yoffset = Math.ceil(Math.sin(radsAboveHoriz) * tick.height);
to:
yoffset = Math.ceil(Math.sin(radsAboveHoriz) * tick.height) / 3.14;

before:

after:

Notice how the labels are slightly more appropiately positioned and the bottoms are no longer cut off.

Here is an more extreme test case:
before:

after:

I am trying to figure out how to solve the cut off on the right side, if I can find a good solution, I'll post back here

[PlippiePlop]

An easy fix for spacing on the sides s to add one ro more 'empty' X ticks using the MAX option. So giving more space to the right.
Example
var totalXticks (count the x ticks)
xaxis:{max:(totalXticks + 2 ) }