The plot(s) on this page use the following plugins:

<script type="text/javascript" src="../plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.barRenderer.min.js"></script>

Rotated axis tick labels is possible through the "jqplot.canvasTextRenderer.min.js" and "jqplot.canvasAxisTickRenderer.min.js" plugins. Canvas text is rendered using the Hershey sans-serif font metrics. Setting the "enableFontSupport" option to true will enable the native font capabilities of the canvas element in Firefox 3.5 and Safari 4. In IE, it enables rendering text using native SVG support through excanvas. In this mode, css font specifications are supported.

By default, tick labels are positioned to so the label end closest to the axis is nearest the tick or bar.

line1 = [['Cup Holder Pinion Bob', 7], ['Generic Fog Lamp', 9], ['HDTV Receiver', 15], 
['8 Track Control Module', 12], [' Sludge Pump Fourier Modulator', 3], 
['Transcender/Spice Rack', 6], ['Hair Spray Danger Indicator', 18]];

plot1 = $.jqplot('chart1', [line1], {
  title: 'Concern vs. Occurrance',
  series:[{renderer:$.jqplot.BarRenderer}],
  axesDefaults: {
      tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
      tickOptions: {
        angle: -30,
        fontSize: '10pt'
      }
  },
  axes: {
    xaxis: {
      renderer: $.jqplot.CategoryAxisRenderer
    },
    yaxis: {
      autoscale:true
    }
  }
});

For comparison, here is the same graph as above but with "enableFontSupport" turned on and the "fontFamily" set. If you have a supported browser, you should see a difference in label fonts. Native font support in the canvas element is somewhat inconsistent among supported browsers and platforms and depends on fonts installed on the system. Therefore, it should be used cautiously.

plot1b = $.jqplot('chart1b', [line1], {
  title: 'Concern vs. Occurrance',
  series:[{renderer:$.jqplot.BarRenderer}],
  axesDefaults: {
      tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
      tickOptions: {
        enableFontSupport: true,
        fontFamily: 'Georgia',
        fontSize: '10pt',
        angle: -30
      }
  },
  axes: {
    xaxis: {
      renderer: $.jqplot.CategoryAxisRenderer
    },
    yaxis: {
      autoscale:true
    }
  }
});

The default positioning applies to either primary or secondary axes and accounts for label rotation to ensure that the labels point to the appropriate bar or tick position.

line2 = [['Nickle', 28], ['Aluminum', 13], ['Xenon', 54], ['Silver', 47], 
['Sulfer', 16], ['Silicon', 14], ['Vanadium', 23]];

plot2 = $.jqplot('chart2', [line1, line2], {
  series:[{renderer:$.jqplot.BarRenderer}, {xaxis:'x2axis', yaxis:'y2axis'}],
  axesDefaults: {
      tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
      tickOptions: {
        angle: 30
      }
  },
  axes: {
    xaxis: {
      renderer: $.jqplot.CategoryAxisRenderer
    },
    x2axis: {
      renderer: $.jqplot.CategoryAxisRenderer
    },
    yaxis: {
      autoscale:true
    },
    y2axis: {
      autoscale:true
    }
  }
});
  

You can override the default position by specifying a labelPosition of 'start', 'middle' or 'end'. The results probably are not as pleasing as the default 'auto' setting.

plot3 = $.jqplot('chart3', [line1], {
  title: 'Concern vs. Occurrance',
  series:[{renderer:$.jqplot.BarRenderer}],
  axesDefaults: {
      tickRenderer: $.jqplot.CanvasAxisTickRenderer,
      tickOptions: {
        angle: -30
      }
  },
  axes: {
    xaxis: {
      renderer: $.jqplot.CategoryAxisRenderer,
      tickOptions: {
        labelPosition: 'middle'
      }
    },
    yaxis: {
      autoscale:true,
      tickRenderer: $.jqplot.CanvasAxisTickRenderer,
      tickOptions: {
        labelPosition: 'start'
      }
    }
  }
});