Chart.js not working on Angular 1.5?

Question

I'm doing some tests with Angular, and wanted to try this cool library to make a test applcation, but it's not working:

ReferenceError: Chart is not defined angular-chart.js:13:5 Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0-rc.1/$injector/modulerr?p0=chartist&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.5.0-rc.1%2F%24injector%2Fmodulerr%3Fp0%3Dchart.js

This is my HTML template:

<!DOCTYPE HTML>
<html ng-app="chartist">
    <head>
      <meta charset="UTF8">
      <!-- Plugins/Frameworks !-->
      <script type="text/javascript" src="plugins/angular.js"></script>
      <script type="text/javascript" src="plugins/angular-route.js"></script>
      <script type="text/javascript" src="plugins/angular-chart.js"></script>

      <!-- JS !-->
      <script type="text/javascript" src="app.js"></script>
      <script type="text/javascript" src="controllers.js"></script>
     <!-- <script type="text/javascript" src="js/directives.js"></script>
      <script type="text/javascript" src="js/services.js"></script> !-->

      <!-- Stylesheets !-->
      <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
      <link rel="stylesheet" type="text/css" href="css/styles.css">
      <link rel="stylesheet" type="text/css" href="css/angular-chart.css">
    </head>
    <body>
        <div ng-view>
        </div>
    </body>
</html>

And I inject the dependency in the module by this way:

var app = angular.module('chartist', ['ngRoute', 'controllers', 'chart.js']);

app.config(['$routeProvider',function($routeProvider) {
    $routeProvider.
    when('/index', {
        templateUrl: 'templates/main.html',
        controller: 'mainCtrl'
    }).
    otherwise({
        redirectTo: '/index'
    });
}]);

Why can't I use Chart.js? Is some version problem? I will be glad is someone helps.

Pankaj Parkar Pankaj Parkar · Accepted Answer · 2016-02-16T10:08:05

If you closely look at error, it does clearly said that

ReferenceError: Chart is not defined angular-chart.js:13:5 Error: [$injector:modulerr]

Basically angular-chart.js doesn't work stand alone API. It is just wrapper directive to make it compatible very easily with AngularJS code. If you look at angular-chart.js code, you will come to know that it uses Chart object, which is come from chart.js API.

To fix you problem you need to add chart.js reference before angular-chart.js as, Chart object will available render chart.

So do add chart.js cdn reference reference before angular-chart.js to make your code working.

I'd also prefer you to go through the angular-chart.js Getting started Doc

Sample Here

Chart.js not working on Angular 1.5?

1 Answers