Uncaught TypeError: undefined is not a function when using highcharts

Question

When i try to use the simple highcharts example, I get the error:

Uncaught TypeError: undefined is not a function 

In addition to :

TypeError: undefined is not a function
at Object.Ya.init (https://code.highcharts.com/highcharts.js:190:496)
at Object.Ya (https://code.highcharts.com/highcharts.js:15:312)
at HTMLDocument.eval (eval at <anonymous> (https://localhost:3000/bower_components/jquery/dist/jquery.js:330:5), <anonymous>:4:15)
at fire (https://localhost:3000/bower_components/jquery/dist/jquery.js:3073:30)
at Object.self.add [as done] (https://localhost:3000/bower_components/jquery/dist/jquery.js:3119:7)
at jQuery.fn.ready (https://localhost:3000/bower_components/jquery/dist/jquery.js:3352:25)
at jQuery.fn.init (https://localhost:3000/bower_components/jquery/dist/jquery.js:2794:16)
at jQuery (https://localhost:3000/bower_components/jquery/dist/jquery.js:76:10)
at eval (eval at <anonymous> (https://localhost:3000/bower_components/jquery/dist/jquery.js:330:5), <anonymous>:1:1)

My code is the simple example on the highcharts website:

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script>
$(function () {

  $('#container').highcharts({
    chart: {
      type: 'bar'
    },
    title: {
      text: 'Fruit Consumption'
    },
    xAxis: {
      categories: ['Apples', 'Bananas', 'Oranges']
    },
    yAxis: {
      title: {
        text: 'Fruit eaten'
      }
    },
    series: [{
      name: 'Jane',
      data: [1, 0, 4]
    }, {
      name: 'John',
      data: [5, 7, 3]
    }]
  });
});

</script>

I've also tried the version where the first line inside is

var chart = new Highcharts.Chart({

When I print out what Highcharts is, it goes give me the right object. jQuery is loaded and working. What else can I try at this point?

Answer 1

You need to load JQuery before highcharts.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

Answer 2

Okay, this issue was actually really straightforward. There was a script tag loading highcharts in earlier code and it was conflicting with the injection in this line.

If you see this error, check if highcharts had been injected already.