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:
- Include jqplot/plugins/jqplot.canvasTextRenderer.js and jqplot/plugins/jqplot.canvasAxisLabelRenderer.js with a script tag.
- 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 );