Rotate Flot Tick Labels

Question

I'm attempting to rotate the dates on the bottom of my graph to appear vertical versus horizontal. I'm using flot-tickrotor but it doesn't seem to work correctly.

 xaxis: {
   rotateTicks: 110,
   mode: "time",
   timeformat: "%m/%d",
   minTickSize: [7, "day"],
   ticks: cpudatearray
 }

The end result is not correct, it all appears jumbled.

Answer 1

@Brendan's answer looks like it might work fairly well, however before you implement that, I would consider whether this is something that you really want to do from a usability perspective.

If the maximum length of text that you're displaying is 5 characters (from your question, a 'MM DD' string), your charts would likely be easier to read if you only labelled every third 'tick' (or however many makes sense for your data).

I went through a similar exercise with my charts on a dashboard-style application. Users were adamant that they needed an X label for every result, but since the chart had 96 ticks this created quite a lot of text once I rotated them 90 degrees like you're attempting to. When I showed them a mockup with a horizontal X label for every 6th point, they preferred that option and that's what we went with for the delivered solution. (Your Mileage May Vary..)

Answer 2

You might have better luck just handling this with CSS instead of using the plug in:

#flotPlaceholder div.xAxis div.tickLabel 
{    
    transform: rotate(-90deg);
    -ms-transform:rotate(-90deg); /* IE 9 */
    -moz-transform:rotate(-90deg); /* Firefox */
    -webkit-transform:rotate(-90deg); /* Safari and Chrome */
    -o-transform:rotate(-90deg); /* Opera */
    /*rotation-point:50% 50%;*/ /* CSS3 */
    /*rotation:270deg;*/ /* CSS3 */
}

Obviously change the angle to whatever it is you're trying to achieve. If you want to use this for the y-axis, just change the div.xAxis selector.

Result after testing in my own flot graph: