How do I control the tick label size in flot

Question

I have a basic bar chart I'm presenting in flot (5 bars, displaying the % per status).

$.plot($("#placeholder"), [
    {
        label: 'Failed',
        data: [[0,10]],
        bars: { show: true }
    },
    {
        label: 'Passed',
        data: [[1,15]],
        bars: { show: true }
    },
    {
        label: 'Not Run',
        data: [[2,30]],
        bars: { show: true }
    },
    {
        label: 'Blocked',
        data: [[3,5]],
        bars: { show: true }
    },
    {
        label: 'In Progress',
        data: [[4,40]],
        bars: { show: true }
    }
],
{
    xaxis: {
        ticks: [[0.5, "Failed"], [1.5, "Passed"], [2.5, "Not Run"], [3.5, "Blocked"], [4.5, "In Progress"]]
    },
    legend: {
        show: false
    }
});

I'm finding the font used for the tick values on the x axis are a little too big, especially when the graph is displayed at small dimensions ie. 240x100. I've read the API documentation, but can't find how to control the tick label sizes.

Is this possible OOTB?

Answer 1

It doesn't appear you can set the font size via the API, but you can use css to set the size of the tick labels.

.tickLabel { font-size: 80% }

Answer 2

Here's an example directly from the API:

xaxis:{
   font:{
      size:11,
      style:"italic",
      weight:"bold",
      family:"sans-serif",
      variant:"small-caps"
   }
}

http://flot.googlecode.com/svn/trunk/API.txt

Answer 3

The above two answers won't work on the latest version of flot, as they no longer use 'real' text (the text is drawn instead). Instead specify these options:

{xaxis: {font: size: some_number}, yaxis: {font: size: some_number}}

(replace some_number with the desired size in points)

Answer 4

I used the following:

CSS File/SCSS File

#graph_label .tickLabel{

     font-size: 50%;
  }

Index.html or place where you are plotting the graph area

$.plot($("graph_label"), [dataArrayReference], options);

Ref: @BrentM 's Answer Above

PS: I am using Flot Version prior to 0.8.1 so I dont have any idea about how latest version would work