Please help me. This error log in console in my angular app.

My App section:

angular.module('fbApp', [
        'ngSanitize',
        'ngRoute',
        'ui.bootstrap',     
        'ui.router',         
        'ui.utils',
        'chieffancypants.loadingBar',
        'ui.date',
        'angular-underscore',
        'highcharts-ng'
    ])

My index.html from bower:

<!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/highcharts-ng/dist/highcharts-ng.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="bower_components/underscore/underscore.js"></script>
    <script src="bower_components/angular-loading-bar/src/loading-bar.js"></script>
    <script src="bower_components/angular-ui-utils/ui-utils.js"></script>
    <script src="bower_components/jquery-ui/ui/jquery-ui.js"></script>
    <script src="bower_components/angular-underscore/angular-underscore.js"></script>
    <!-- endbower -->

Where is my problem?

Please help me. This error log in console in my angular app.

My App section:

angular.module('fbApp', [
        'ngSanitize',
        'ngRoute',
        'ui.bootstrap',     
        'ui.router',         
        'ui.utils',
        'chieffancypants.loadingBar',
        'ui.date',
        'angular-underscore',
        'highcharts-ng'
    ])

My index.html from bower:

<!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/highcharts-ng/dist/highcharts-ng.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="bower_components/underscore/underscore.js"></script>
    <script src="bower_components/angular-loading-bar/src/loading-bar.js"></script>
    <script src="bower_components/angular-ui-utils/ui-utils.js"></script>
    <script src="bower_components/jquery-ui/ui/jquery-ui.js"></script>
    <script src="bower_components/angular-underscore/angular-underscore.js"></script>
    <!-- endbower -->

Where is my problem?

• javascript
• angularjs
• highcharts
• bower

• 1 It doesn't look like you have the highcharts script. You just have the directives. – Ben Felda Commented May 27, 2014 at 21:10
• 2 Apart of highcharts-ng.js, you need to load highcharts.js library. – Sebastian Bochan Commented May 28, 2014 at 10:32

5 Answers 5

highcharts-ng depends on hightcharts so you need to install them both.

bower install --save highcharts
bower install --save highcharts-ng

I've come across exactly same problem. I think the answer is in the documentation. Check the git hub documentation Git hub documentation I found the solution to this. Insert the below script tag in the index above the script tag highcharts-ng.js

<script src="http://code.highcharts.com/highcharts.src.js"></script> <script src="bower_components/highcharts-ng/src/highcharts-ng.js"></script>

This should remove the error.

Download highcharts.js and link it in your app. You only have the angular directive highcharts-ng .

Another way to do this via bower.json; Update the following dependencies.

"highcharts" : "*",
"highcharts-ng" : "*"

Run the bower update from the command line project directory.

Use the "highcharts-ng module

var myApp = angular.module('myApp',
[
    "highcharts-ng",
    "ngRoute",
    "myApp.view1",
    "myApp.view2",
    "myApp.version"
]);

Include the following in the index.html or view

<script src="http://code.highcharts.com/highcharts.src.js"></script>
<script src="bower_components/highcharts-ng/dist/highcharts-ng.js"></script>

It looks like highcharts.js is dependent on jQuery. Verify that jQuery is loading correctly and it's the correct version.