c# - 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

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: