CODEWITHSUNDEEP
htmlcsscanvasflot
Justin
Justin

Reputation: 6559

Flot graph tick label

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?

Upvotes: 0

Views: 1529

Answers (1)

Ryley
Ryley

Reputation: 21226

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).

Upvotes: 1

Related Questions