flot.axislabels: how to choose labels' colors?

Question

I am using flot with the plugin "jquery.flot.axislabels.js", but I can't find other documentation than the README file. So the general question is "where can I find some complete documentation ?" And the more specific one is: "How to set the label's color ?" Some properties are available, such as "axisLabelFontSizePixels", "axisLabelFontFamily", etc... so I've tried "axisLabelColor" and "axisLabelFontColor" without any result.

I tried to use CSS too, according to this: http://people.mozilla.com/~mcote/flot-axislabels/example/ But it does not work either. Maybe CSS is working with an older version of axislabel.js.

Ideally I'd avoid doing this with CSS, I guess that if we are able to choose the font we are able to choose the color. But I cant find what syntax I have to use...

If someone knows something, I'd be glad to read it :-) Thanks and regards, S.

Answer 1

From looking at the source code it doesn't look like the plugin provides that option in either of it's two modes of operation:

1.) Draw the labels using the canvas - no ability to set color (only font family and size). If you are handy with JavaScript adding color wouldn't be too difficult. (You are probably using this option since it explains why your CSS doesn't work.)

2.) Draw the labels using HTML DIVs. This is what your linked example does. In it the author specifies the color through an inline CSS tag. How I would do it though to keep it all together is after your plot call:

  $('.yaxisLabel').css('color','red');
  $('.y2axisLabel').css('color','orange');
  $('.y3axisLabel').css('color','green');
  $('.y4axisLabel').css('color','purple');

Example here.