How to Get Axis Labels in Flot Charts

Have you tried adding axis labels in to any type of Flot chart ? By default Flot does not support axis labels. But it is very easy to get the axis labels with the aid of a simple plugin. So let's see how we can get it done in 3 steps !!!

1. Git clone this repository and place the jquery.flot.axislabels.js inside the folder where you have other Flot related libraries or plugins.

                          git clone https://github.com/xuanluo/flot-axislabels.git

    2.  Import the script file in the Flot chart file as follows.

      <script language="javascript" type="text/javascript" src="../../jquery.flot.axislabels.js"></script>

    3. Pass the axis names and their formatting in the options section along with the other options of X-axis and Y-axis as in the below snippet.

                       xaxis: {

                     axisLabel: 'X',

                      axisLabelUseCanvas: true,

                      axisLabelFontSizePixels: 12,

        axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',

        axisLabelPadding: 5

                 },

            yaxis: {

axisLabel: 'Sin(X)',

        axisLabelUseCanvas: true,

        axisLabelFontSizePixels: 12,

        axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',

        axisLabelPadding: 5

               },

Now you can see the axis labels appearing in your chart as shown in the below image. 

We are done :) It is simple as that.

Have a look at the README section of the cloned repository  for more details. (Although I said a repository, it is just a single file )

You can refer the full sample code given below in-case if anything was unclear.

 
 
 
 
 
 
 
 



 

  

Axis Labels



  

   

Acknowledgement
[1] https://github.com/xuanluo/flot-axislabels