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?

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. — emeraldjava, Nov 06 '09 at 14:05
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. — Bittercoder, Nov 08 '09 at 09:45

score 17 · Accepted Answer · answered Mar 20 '09 at 14:52

17

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

answered Mar 20 '09 at 14:52

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! – Bittercoder Mar 21 '09 at 21:51
where should i make this change @BrentM – madLokesh Jun 11 '13 at 08:36
@madLokesh in your CSS file. – itziki May 19 '14 at 07:32
Also you can control y or x label : `.flot-y-axis .tickLabel { font-size: 9px }` `.flot-x-axis .tickLabel { font-size: 12px }` – sHaDeoNeR Dec 31 '14 at 11:27
For people looking how to do it via the API nevertheless, have a look at the other answer of @Shun Takeda – Adam Sibik Jul 17 '19 at 14:36

score 12 · Answer 2 · edited Aug 15 '14 at 13:49

12

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

edited Aug 15 '14 at 13:49

Dennis

7,907
11
65
115

answered Jul 12 '12 at 21:17

Shun Takeda

216
2
8

score 6 · Answer 3 · answered Dec 08 '11 at 12:13

6

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)

answered Dec 08 '11 at 12:13

Joel Cross

1,400
15
22

[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](https://github.com/flot/flot/blob/master/API.md#customizing-the-axes) – Apr 22 '14 at 09:33
1

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). – Apr 22 '14 at 09:35

score 1 · Answer 4 · answered Jun 13 '13 at 06:15

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

How do I control the tick label size in flot

4 Answers4