0

I am trying to rotate the label on my X-Axis on my flot graph in a similar way a user asked here - Rotate Flot Tick Labels

The problem I am facing is that it looks like the CSS selector for the X-Axis doesn't select anything. The selector I am using is:

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 */
}

I also don't even understand how the graph is even visible. I don't know much about the canvas tag, but it looks like it is completely empty.

enter image description here enter image description here

I don't understand how the source there is empty. I would think there would be some sort of markup like vector points that represent the graph. Is that just how canvas works? Also, how would you even know what CSS selectors to use at that point if you can't view the source?

Community
  • 1
  • 1
Justin
  • 6,373
  • 9
  • 46
  • 72
  • Ryley's answer is the best suggestion based on the info that's here. If that's not it, then please show us the expanded hierarchy beneath the flot-text div. Regarding your canvas question, drawing on canvas is just changing pixel values; there are never any child elements. You may be thinking of SVG/VML, where the components of the final image are separate elements within the DOM. – DNS Apr 16 '13 at 22:33

1 Answers1

1

You are probably using the canvas plugin, and setting canvas: true in your options. That forces flot to draw the labels on the canvas, rather than putting them where you are expecting (in the divs).

Ryley
  • 21,046
  • 2
  • 67
  • 81