title: highcharts Cannot read property 'legendBackgroundColor'
body: <p>I'm trying to create a chart using highcharts to represent some data. However i'm getting the following error upon including the files. I've got the latest release of Highcharts.
  <strong>Could it be a problem with importing the theme files, if so how could I resolve it?</strong>
  <a href="http://i.imgur.com/ZyWa0.png" rel="nofollow">http://i.imgur.com/ZyWa0.png</a></p>
  
  <p><strong>Jade Template engine, including the JavaScript code:</strong></p>
  
  <pre><code>  script(type="text/javascript", src="javascripts/jquery.min.js")
    script(type="text/javascript", src="javascripts/highcharts.js")
    script(type="text/javascript", src="javascripts/client-project.js")
  </code></pre>
  
  <p><strong>Chrome console Error:</strong></p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'legendBackgroundColor' of undefined
  (anonymous function)client-project.js:64
  f.extend._Deferred.e.resolveWithjquery.min.js:1
  e.extend.readyjquery.min.js:1
  c.addEventListener.B
  </code></pre>
  
  <p><strong>JavaScript taken directly from the highcharts demo (unchanged) 'client-project.js':</strong></p>
  
  <pre><code>var chart;
  $(document).ready(function() {
     chart = new Highcharts.Chart({
        chart: {
           renderTo: 'container',
           zoomType: 'xy'
        },
        title: {
           text: 'Average Monthly Temperature and Rainfall in Tokyo'
        },
        subtitle: {
           text: 'Source: WorldClimate.com'
        },
        xAxis: [{
           categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
              'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        }],
        yAxis: [{ // Primary yAxis
           labels: {
              formatter: function() {
                 return this.value +'Â°C';
              },
              style: {
                 color: '#89A54E'
              }
           },
           title: {
              text: 'Temperature',
              style: {
                 color: '#89A54E'
              }
           }
        }, { // Secondary yAxis
           title: {
              text: 'Rainfall',
              style: {
                 color: '#4572A7'
              }
           },
           labels: {
              formatter: function() {
                 return this.value +' mm';
              },
              style: {
                 color: '#4572A7'
              }
           },
           opposite: true
        }],
        tooltip: {
           formatter: function() {
              return ''+
                 this.x +': '+ this.y +
                 (this.series.name == 'Rainfall' ? ' mm' : 'Â°C');
           }
        },
        legend: {
           layout: 'vertical',
           align: 'left',
           x: 120,
           verticalAlign: 'top',
           y: 100,
           floating: true,
           backgroundColor: Highcharts.theme.legendBackgroundColor || '#FFFFFF'
        },
        series: [{
           name: 'Rainfall',
           color: '#4572A7',
           type: 'column',
           yAxis: 1,
           data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]      
  
        }, {
           name: 'Temperature',
           color: '#89A54E',
           type: 'spline',
           data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }]
     });      
  });
  </code></pre>