Geek Answers Handbook

Flot.axislabels: how to choose label colors?

I am using flot with the jquery.flot.axislabels.js plugin, but I cannot find any other documentation besides the README file. So the general question is: "Where can I find the full documentation?" And more specific is the following: "How to set the color of the label?" Some properties are available, such as "axisLabelFontSizePixels", "axisLabelFontFamily" etc., so I tried "axisLabelColor" and "axisLabelFontColor" without any results.

I also tried using CSS, according to this: http://people.mozilla.com/~mcote/flot-axislabels/example/ But this also does not work. CSS may be working with the old version of axislabel.js.

Ideally, I would avoid doing this with CSS, I think that if we can choose a font, we can choose a color. But I can not find which syntax I should use ...

If someone knows something, I would be happy to read it :-) Thank you and welcome, S.

+4
source share
4 answers

From a look at the source code, it does not look like the plugin provides this option in any of two operating modes:

1.) Draw labels using the canvas - there is no way to set the color (only the family and font size). If you prefer adding JavaScript, the color won't be too complicated. (You are probably using this option as it explains why your CSS is not working.)

2.) Draw tags using the HTML DIV. This is what your linked example does. In it, the author indicates the color through the built-in CSS tag. How would I do it, though keep it all together after your plot rings:

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

An example is here .

+10
source

It was easier for me to simply add !important to target classes created by the fleet. You can target .yaxisLabel or .xaxisLabel to target the .xaxisLabel , or .flot-text for the target.

 .flot-text { color: rgba(255, 255, 255, 0.3) !important }
+2
source

I had to explicitly set axisLabelUseCanvas:false and use $('.axisLabels').css('color','red'); to make them red

0
source

I know that there is one accepted answer in this question, but just thought about sharing how I ultimately work it.

FLOT version: Flot 0.8.3

I had to explicitly set axisLabelUseCanvas:false , and then write some jQuery code:

$('.flot-tick-label').css('color','red');

And now we, after several hours of disappointment, were finally red!

Hope this helps someone who is lost in the Navy.

0
source

More articles:


All Articles