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?

Michelemichelina

Any chance you could post the updated and corrected solution? I tried adding this 'grid: { hoverable: true, clickable: false, .tickLabel { font-size: 80% } },' to my chart but it bombs out. – Melbamelborn

You need to add .tickLabel to your app's cascading style sheet (CSS), not as part of the json you pass to the flot call. – Michelemichelina

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% }

Farrel

Yeah I discovered this myself but forgot to followup by closing this question. The CSS changes have some "interesting" effects in IE when zooming a page up to say 120% unfortunately - though IE isn't a great candidate for flot at the best of times really! Thanks for the confirmation! – Michelemichelina

where should i make this change @BrentM – Expeditionary

@Expeditionary in your CSS file. – Bona

Also you can control y or x label : .flot-y-axis .tickLabel { font-size: 9px } .flot-x-axis .tickLabel { font-size: 12px } – Thompkins

For people looking how to do it via the API nevertheless, have a look at the other answer of @Shun Takeda – Sandlin

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

Khalif

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)

Shy

For compatibility with Flot 0.7 and earlier the labels are also given the 'tickLabel' class, but this is deprecated and scheduled to be removed with the release of version 1.0.0 – Joellajoelle

Also, the latest version still uses 'real' text by default. Once you include the 'canvas' plugin the default seems to switch (which doesn't seem to be documented). – Joellajoelle

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

Expeditionary

Answer 5

This solution is working for me with new version of flot. In the yaxis attributes, define the following tickFormatter() function :

yaxis : {
 ... 
    
    tickFormatter = function (val, axis) {
        var label = val.toFixed(axis.tickDecimals);
        if (minorTicks.includes(val)) {
            return '<span class="minor-tick">' + label + '</span>';
        } else {
            return label;
        }
    };
}

Then in the CSS add the following :

.flot-y-axis .flot-tick-label span.minor-tick {
    font-size: smaller;
    color: gray; 
}

Malpighiaceous