Axis label in Flot

Question

Does anyone know how one can set the label or title of an axis in Flot?

I've read the API but it doesn't seem to have that feature...

Thanks :)

Ryley · Accepted Answer · 2013-03-13T15:13:00.077

37

There are none built-in to flot.

Your best bet is to do it yourself via positioned divs, but if you are adventurous, you can look at the issue (Or the original issue) and see how other people have dealt with it.

Specifically, there are two people who have recently made label-related revisions to flot:

https://github.com/RuiPereira/flot/raw/axislabels/jquery.flot.axislabels.js

http://github.com/xuanluo/flot-axislabels

edited Mar 13 '13 at 15:13

answered Apr 06 '11 at 15:28

Ryley

21,046
2
67
81

I'm going to try doing myself with positioned divs. Thank you. – Nobita Apr 06 '11 at 15:43
The y axis label on the [homepage](http://www.flotcharts.org/) is done just as this answer says: by carefully positioned divs. It appears however that [version 0.9 of Flot will include axis labels](https://github.com/flot/flot/pull/1090). – Matthew Walker Sep 11 '13 at 09:50
Thanks @MatthewWalker - once 0.9 is released, I will update my answer – Ryley Sep 11 '13 at 15:59
welp. ... it worked, but it also removed my custom label formatting, so no go – Dennis Sep 23 '14 at 20:17

score 37 · Answer 2 · answered Mar 12 '12 at 20:00

37

Shameless self-plug: I fixed and greatly extended xuanluo's flot-axislabels plugin: http://github.com/markrcote/flot-axislabels/ As far as I know, it is the best solution for axis labels at the moment.

answered Mar 12 '12 at 20:00

Mark

371
3
2

1

this worked for me woo hoo. methinks this can be the accepted answer – Dennis Sep 23 '14 at 20:37
1

Should be the accepted answer. Integration was painless – Alfredo A. Oct 07 '16 at 16:38
This is absolutely the right answer! Thank you. – Bruno Ferreira Mar 31 '21 at 22:05

score 36 · Answer 3 · edited Aug 12 '13 at 17:20

36

i'm using this workaround:

yaxis: {
tickFormatter: function(val, axis) { return val < axis.max ? val.toFixed(2) : "CZK/l";}
}

Very simple, the max value on the Y axis is replaced by a custom string. I've not tested on the X axis, but I see no reason why it shouldn't work.

edited Aug 12 '13 at 17:20

Cheezmeister

4,895
3
31
37

answered Feb 08 '12 at 16:53

Mishami

470
4
4

sadly it doesn't show on mine as Flot decided to hide the last (max) tick mark from graph – Dennis Sep 23 '14 at 20:06
what's the purpose of toFixed(2)? – knocte Jul 09 '15 at 19:45
@knocte Without the toFixed(2), you might end up seeing this sort of thing on your graph: `11.5000000004`. Not very attractive. – Justin Jul 17 '15 at 23:41

score 6 · Answer 4 · answered Jun 22 '12 at 02:04

A suggestion I saw that works pretty well is to put the graph in the middle of a 3x3 table. Then the labels can be put in the others cells.

<table style="text-align:center">
  <tr>
    <td></td>

    <td>Plot Title Goes Here</td>

    <td> </td>
  </tr>

  <tr>
    <td>Y Axis Label</td>

    <td>
      <div id="graph here" style="width:600px;height:300px"></div>
    </td>

    <td></td>
  </tr>

  <tr>
    <td></td>

    <td>X Axis Label Goes Here</td>

    <td></td>
  </tr>

</table>

A decent workaround. I think for the y axis, maybe use an image so you can get it vertical. — Orion, Dec 22 '17 at 21:35

score 3 · Answer 5 · answered Aug 31 '15 at 16:11

Example for 2dims graph (x and y axis) solved with pure css.

Y axis:

#placeholder:after {
    content: 'Speed';
    position: absolute;
    top: 50%;
    left: -50px;
    font-weight: 600;
    /* Safari */
    -webkit-transform: rotate(-90deg);
    /* Firefox */
    -moz-transform: rotate(-90deg);
    /* IE */
    -ms-transform: rotate(-90deg);
    /* Opera */
    -o-transform: rotate(-90deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

X axis:

#placeholder:before {
    content: 'Time';
    position: absolute;
    bottom: -30px;
    left: 50%;
    font-weight: 600;
}

score 0 · Answer 6 · answered Jul 15 '13 at 05:09

0

$("<div class='axisLabel yaxisLabel'></div>")
        .text("Pressure")
        .appendTo($("#yl_1"));

This will works too.

answered Jul 15 '13 at 05:09

szpapas

305
2
5

score 0 · Answer 7 · answered Jan 16 '18 at 15:53

I use szpapas idea.

I added more jquery code below it to overwrite x-axis like this.

            $('div.flot-x-axis div.flot-tick-label.tickLabel:nth-child(1)').html("Berhad")
            $('div.flot-x-axis div.flot-tick-label.tickLabel:nth-child(2)').html("")
            $('div.flot-x-axis div.flot-tick-label.tickLabel:nth-child(3)').html("Sdn Bhd")
            $('div.flot-x-axis div.flot-tick-label.tickLabel:nth-child(4)').html("")
            $('div.flot-x-axis div.flot-tick-label.tickLabel:nth-child(5)').html("Enterprise")
            $('div.flot-x-axis div.flot-tick-label.tickLabel:nth-child(6)').html("")
            $('div.flot-x-axis div.flot-tick-label.tickLabel:nth-child(7)').html("Koperasi")

Axis label in Flot

7 Answers7

Linked