title: Jqplot canvasAxisTickRenderer breaking plot
body: <p>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.</p>
  
  <p>I have added the <code>js</code> file to my <code>application.js</code> file.</p>
  
  <pre><code>//= 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
  </code></pre>
  
  <p>Can anyone see what is wrong with this code that causes the error:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>The code:</p>
  
  <pre><code>$(document).ready(function(){
  
  
      var plot_&lt;%= poll.id %&gt; = $.jqplot('poll-graph_&lt;%= poll.id %&gt;', dataBar_&lt;%= poll.id %&gt;, {
        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_&lt;%#= @portfolio.id %&gt;[pointIndex][0];
            a = ticks_&lt;%= poll.id %&gt;[pointIndex];
  
            return a;
          }
        },
        axes: {
            // Use a category axis on the x axis and use our custom ticks.
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks_&lt;%= poll.id %&gt;,
                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_&lt;%= poll.id %&gt;.replot( { resetAxes: true } );
      });
  
  
    });
  </code></pre>
  
  <p>Here is the data:</p>
  
  <pre><code>var ticks_3 = ["Equities","Bonds","Property","Multi-asset","Income","Other"];
  
  var pollData_3 = [5,1,1,1,1,1];
  
  var dataBar_3 = [pollData_3];
  </code></pre>