Jqplot canvasAxisTickRenderer breaking plot

Question

I'm trying to add canvasAxisTickRenderer so that my ticks can be rotated but adding it is causing the plot to break and nothing gets displayed.

I have added the js file to my application.js file.

//= require plugins/jquery.jqplot
//= require plugins/jqplot.cursor.min
//= require plugins/jqplot.dateAxisRenderer.min
//= require plugins/jqplot.highlighter.min
//= require plugins/jqplot.donutRenderer
//= require plugins/jquery.cookie.js
//= require plugins/jqplot.categoryAxisRenderer
//= require plugins/jqplot.barRenderer
//= require plugins/jqplot.canvasAxisTickRenderer

Can anyone see what is wrong with this code that causes the error:

Uncaught TypeError: undefined is not a function$.jqplot.CanvasAxisTickRenderer @ jqplot.canvasAxisTickRenderer.js?body=1:138$.jqplot.CategoryAxisRenderer.createTicks @ jqplot.categoryAxisRenderer.js?body=1:149$.jqplot.CategoryAxisRenderer.draw @ jqplot.categoryAxisRenderer.js?body=1:312Axis.draw @ jquery.jqplot.js?body=1:739draw @ jquery.jqplot.js?body=1:2978$.jqplot @ jquery.jqplot.js?body=1:242(anonymous function) @ poll_questions:419jQuery.Callbacks.fire @ jquery.js?body=1:3065jQuery.Callbacks.self.fireWith @ jquery.js?body=1:3177jQuery.extend.ready @ jquery.js?body=1:434completed @ jquery.js?body=1:105

The code:

$(document).ready(function(){


    var plot_<%= poll.id %> = $.jqplot('poll-graph_<%= poll.id %>', dataBar_<%= poll.id %>, {
      height:200,

      seriesDefaults:{
          renderer:$.jqplot.BarRenderer,
          rendererOptions: {fillToZero: true,
                              barWidth: 50,
                              highlightMouseOver: false,
                              shadow: false
                              }
      },
      grid: {
        shadow:false,
        borderWidth: 0,
        background: '#ffffff',

      },
      highlighter: {
        show: true,
        useAxesFormatters: false,
        tooltipLocation: 'n',
        tooltipContentEditor: function (str, seriesIndex, pointIndex, plot) {

          // a = portfolioData_<%#= @portfolio.id %>[pointIndex][0];
          a = ticks_<%= poll.id %>[pointIndex];

          return a;
        }
      },
      axes: {
          // Use a category axis on the x axis and use our custom ticks.
          xaxis: {
              renderer: $.jqplot.CategoryAxisRenderer,
              ticks: ticks_<%= poll.id %>,
              tickRenderer: $.jqplot.CanvasAxisTickRenderer,
              tickOptions: {
                showLabel: true
              }
          },
          // Pad the y axis just a little so bars can get close to, but
          // not touch, the grid boundaries.  1.2 is the default padding.
          yaxis: {
              tickOptions: {

                show: false

              }

          }
      }

    });

    $(window).resize(function() {
          plot_<%= poll.id %>.replot( { resetAxes: true } );
    });


  });

Here is the data:

var ticks_3 = ["Equities","Bonds","Property","Multi-asset","Income","Other"];

var pollData_3 = [5,1,1,1,1,1];

var dataBar_3 = [pollData_3];