How to set CSS style for X Axis labels?

[Guillem PG]

Hi,

I'm developing a web application that uses Gflot v 3.1.1 to build graphs. In some cases, my graphs' X Axis labels have a long text String that I'd like to rotate so that they don't overlap and can be read. So far, I've come to a nasty hack (see attached image) that uses a "placeholder" like (a), (b), (c) as X Axis label, and has a ListBox with the meaning of each placeholder.

This has the drawback that, if I generate an image the X Axis labels don't have a "readable" meaning unless somehow the ListBox is also included.

The X Axis labels could be rotated so as to accommodate these long String. I have in my application's CSS the (web-kit/moz/o)-transform code to rotate text in several web browsers, but I haven't found how to apply this style to my X Axis labels.

I've tried modifying my TickFormatter.formatTickValue(double tickValue, Axis axis) implementation so that returned an HTML tag:

    return "<span class='dbAnalysisLabel'>"+labelToDisplay+"</span>"; 

instead of simply returning the string to be displayed, but everything within the tags is removed, I guess for safety reasons.

Is there a way I can set the CSS style of my X Axis labels?

Thank you very much,

Guillem Plasencia Gallofre.

[Nicolas Morel]

Hello, 

If you didn't include the canvas plugin, the axis label are already rendered as HTML.

Look at the generated DOM with firebug, you'll find a div with class "flot-text" containing a div for each axes. Each of this div also have classes. For example, the first x axis has : "flot-x-axis flot-x1-axis xAxis x1Axis"

You can use those css class to add your rotation.

[Guillem PG]

Hi,

Thank you Nicolas for the Firebug hint, I did apply the CSS style to class "flot-x-axis", which rotated the whole axis but not the labels inside the axis:






I also tried to change the name of the style in my CSS file to "tickLabel" (after reading a message from Nicolas in this thread: https://groups.google.com/forum/#!topic/gflot/8Lx8A1qaVVo) but this was applied to both my X and Y axis labels (I only want the X axis labels rotated):





Finally, including CSS descendant selection (as explained here: https://www.w3.org/community/webed/wiki/Advanced_CSS_selectors#Child_selector) in my css file:

    .flot-x-axis div.tickLabel {...}


correctly applied rotation only to X axis labels:



Thank you!

Guillem Plasencia Gallofre