Axis Labels

jqPlot support axis labels through the "label" option of each axis. The default label renderer creates labels in div tags, which allows full css control over every label. Labels are assigned css classes like "jqplot-axis_name-label" where "axis_name" will be xaxis, yaxis, etc.

Angle (radians)

-1

Cosine

-1.5

-1.0

-0.5

0.0

0.5

1.0

1.5

$(document).ready(function(){
  var cosPoints = []; 
  for (var i=0; i<2*Math.PI; i+=0.1){ 
     cosPoints.push([i, Math.cos(i)]); 
  } 
  var plot1 = $.jqplot('chart1', [cosPoints], {  
      series:[{showMarker:false}],
      axes:{
        xaxis:{
          label:'Angle (radians)'
        },
        yaxis:{
          label:'Cosine'
        }
      }
  });
});

By including the "jqplot.canvasTextRenderer.min.js" and "jqplot.canvasAxisLabelRenderer.min.js" plugins, you can render label text directly onto canvas elements. This allows text to be rotated and yaxes will have their labels rotated 90 degrees by default. By default the labels will be rendered using the Hershey font metrics and not stroked as text. Most recent browsers (include IE 9) support native text rendering in canvas elements.

-1

-1.5

-1.0

-0.5

0.0

0.5

1.0

1.5

$(document).ready(function(){
  var cosPoints = []; 
  for (var i=0; i<2*Math.PI; i+=0.1){ 
     cosPoints.push([i, Math.cos(i)]); 
  } 
  var plot2 = $.jqplot('chart2', [cosPoints], {  
      series:[{showMarker:false}],
      axes:{
        xaxis:{
          label:'Angle (radians)',
          labelRenderer: $.jqplot.CanvasAxisLabelRenderer
        },
        yaxis:{
          label:'Cosine',
          labelRenderer: $.jqplot.CanvasAxisLabelRenderer
        }
      }
  });
});

If a visitors is using a browser suppporting native canvas fonts, the plot belowsupported browser, they will see the labels in the plot below rendered as 12 pt Georgia (or their system serif font if Georgia is unavailable). If they are on an unsupported browser, they will see the default Hershey font.

-1

-1.5

-1.0

-0.5

0.0

0.5

1.0

1.5

$(document).ready(function(){
  var cosPoints = []; 
  for (var i=0; i<2*Math.PI; i+=0.1){ 
     cosPoints.push([i, Math.cos(i)]); 
  } 
  var plot3 = $.jqplot('chart3', [cosPoints], {  
      series:[{showMarker:false}],
      axes:{
        xaxis:{
          label:'Angle (radians)',
          labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
          labelOptions: {
            fontFamily: 'Georgia, Serif',
            fontSize: '12pt'
          }
        },
        yaxis:{
          label:'Cosine',
          labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
          labelOptions: {
            fontFamily: 'Georgia, Serif',
            fontSize: '12pt'
          }
        }
      }
  });
});

The charts on this page depend on the following files:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="../src/jquery.jqplot.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.canvasTextRenderer.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
<link rel="stylesheet" type="text/css" href="../src/jquery.jqplot.css" />