Vertical Y-axis labels in jqplot

During our monthly Open Source Hackathon, I set out to create a plugin for the excellent jqplot charting library that would display Y-axis labels in a vertical orientation. I had implemented this feature in a hacky, ad-hoc manner while working on our intranet, and I wanted to make it resuable.

Happily, I found that one of the existing jqplot plugins supports vertical labels. It just wasn't documented well-enough for me to easily find it using Google. So, here's what I ended up doing to create vertical labels in my plots:

  1. Include jqplot/plugins/jqplot.canvasTextRenderer.js and jqplot/plugins/jqplot.canvasAxisLabelRenderer.js with a script tag.
  2. In the Javascript that draws your plot, choose an alternate axis label renderer and send it some additional options:
jqplotOptions = {};
jqplotOptions.axes.yaxis.label = "My Label Text";
// CanvasAxisLabelRenderer supports vertical labels
jqplotOptions.axes.yaxis.labelRenderer = $.jqplot.CanvasAxisLabelRenderer;
jqplotOptions.axes.yaxis.labelOptions = {
  angle: 270,
  fontFamily: "Arial, Verdana, Helvetica",
  fontSize: "8pt"
}

plot = $.jqplot(target_id,
         values,
         jqplotOptions
);