TypeError: $(...).highcharts is not a function - Existing solutions not working - problems with Yeoman generator

Question

I am following the highcharts get started tutorial here: http://www.highcharts.com/docs/getting-started/your-first-chart

For some reason the code works in a separate HTML file, but not when it's part of my Yeoman built web application

I've fallen at the first hurdle and get the following error: TypeError: $(...).highcharts is not a function

My code is below and here is the full error:

TypeError: $(...).highcharts is not a function at HTMLDocument.eval (eval at (http://localhost:9000/bower_components/jquery/dist/jquery.js:328:5), :2:21) at fire (http://localhost:9000/bower_components/jquery/dist/jquery.js:3099:30) at Object.self.add [as done] (http://localhost:9000/bower_components/jquery/dist/jquery.js:3145:7) at jQuery.fn.ready (http://localhost:9000/bower_components/jquery/dist/jquery.js:3378:25) at jQuery.fn.init (http://localhost:9000/bower_components/jquery/dist/jquery.js:2821:16) at jQuery (http://localhost:9000/bower_components/jquery/dist/jquery.js:76:10) at eval (eval at (http://localhost:9000/bower_components/jquery/dist/jquery.js:328:5), :1:1) at eval (native) at Function.jQuery.extend.globalEval (http://localhost:9000/bower_components/jquery/dist/jquery.js:328:5) at jQuery.fn.extend.domManip (http://localhost:9000/bower_components/jquery/dist/jquery.js:5435:16)

There are multiple other posts about this - however none of the solutions have worked for me, can't see what I'm doing wrong here, all I've done is copy the tutorial.

Here is my HTML file:

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://code.highcharts.com/highcharts.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>
</head>

<body>
<div id="container" style="width:100%; height:400px;"></div>
</body>

</html>

Try to put your js code and the <script src=> before the body tag — Jorge Mejia
Do you run in https environment? It's possible that highcharts would not be load because your site is https and script is http — Ygalbel
Please try to provide the src without the protocol: <script src="//code.highcharts.com/highcharts.js"></script> — baao
or it might be that you haven't properly imported highcharts library? — Mohit Bhardwaj
Any chance Yeoman does any magic on script loading? Like making them async? Would injecting the highcharts raw code in the head script work? — apokryfos

Mohit Bhardwaj Mohit Bhardwaj · Accepted Answer · 2016-04-20T14:35:33

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://code.highcharts.com/highcharts.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>
</head>

<body>
<div id="container" style="width:100%; height:400px;"></div>
</body>

</html>

works fine. Just removed the double closing brackets from closing html tag.

TypeError: $(...).highcharts is not a function - Existing solutions not working - problems with Yeoman generator

1 Answers