I have tried to work with angular-charts. Its documents in .js/

I have integrate angular-chart.js, chart.js & angular-chart.css. I have also integrate 'chart.js'in angular module. But I have found an error. Error is Chart is not defined. But cant understand why this problem occurs.

My code :

angular.module('mean.system',['ui.bootstrap','chart.js']);

in controller :

  $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  $scope.series = ['Series A', 'Series B'];

  $scope.data = [
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90]
  ];

HTML :

<link href="css/angular-chart.css" rel="stylesheet">
<script type="text/javascript" src="/js/angular-chart.js"></script>
<script type="text/javascript" src="/js/Chart.js"></script>


<canvas id="bar" class="chart chart-bar" data="data"
          labels="labels"></canvas>

Error in browser console :

ncaught ReferenceError: Chart is not definedChart.defaults.global.responsive @ angular-chart.js:11(anonymous function) @ angular-chart.js:13
angular.js:78 Uncaught Error: [$injector:modulerr] Failed to instantiate module mean due to:
Error: [$injector:modulerr] Failed to instantiate module chart.js due to:
Error: [$injector:nomod] Module 'chart.js' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
.2.6/$injector/nomod?p0=chart.js
    at http://localhost/lib/angular/angular.js:78:12
    at http://localhost/lib/angular/angular.js:1526:17
    at ensure (http://localhost/lib/angular/angular.js:1451:38)
    at module (http://localhost/lib/angular/angular.js:1524:14)
    at http://localhost/lib/angular/angular.js:3614:22
    at Array.forEach (native)
    at forEach (http://localhost/lib/angular/angular.js:302:11)
    at loadModules (http://localhost/lib/angular/angular.js:3608:5)
    at http://localhost/lib/angular/angular.js:3615:40
    at Array.forEach (native)
.2.6/$injector/modulerr?p0=chart.js&p1=Error%3…ngular%2Fangular.js%3A3615%3A40%0A%20%20%20%20at%20Array.forEach%20(native)
    at http://localhost/lib/angular/angular.js:78:12
    at http://localhost/lib/angular/angular.js:3642:15
    at Array.forEach (native)
    at forEach (http://localhost/lib/angular/angular.js:302:11)
    at loadModules (http://localhost/lib/angular/angular.js:3608:5)
    at http://localhost/lib/angular/angular.js:3615:40
    at Array.forEach (native)
    at forEach (http://localhost/lib/angular/angular.js:302:11)
    at loadModules (http://localhost/lib/angular/angular.js:3608:5)
    at createInjector (http://localhost/lib/angular/angular.js:3548:11)
.2.6/$injector/modulerr?p0=mean&p1=Error%3A%20…njector%20(http%3A%2F%2Flocalhost%2Flib%2Fangular%2Fangular.js%3A3548%3A11)

I have tried to work with angular-charts. Its documents in http://jtblin.github.io/angular-chart.js/

I have integrate angular-chart.js, chart.js & angular-chart.css. I have also integrate 'chart.js'in angular module. But I have found an error. Error is Chart is not defined. But cant understand why this problem occurs.

My code :

angular.module('mean.system',['ui.bootstrap','chart.js']);

in controller :

  $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  $scope.series = ['Series A', 'Series B'];

  $scope.data = [
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90]
  ];

HTML :

<link href="css/angular-chart.css" rel="stylesheet">
<script type="text/javascript" src="/js/angular-chart.js"></script>
<script type="text/javascript" src="/js/Chart.js"></script>


<canvas id="bar" class="chart chart-bar" data="data"
          labels="labels"></canvas>

Error in browser console :

ncaught ReferenceError: Chart is not definedChart.defaults.global.responsive @ angular-chart.js:11(anonymous function) @ angular-chart.js:13
angular.js:78 Uncaught Error: [$injector:modulerr] Failed to instantiate module mean due to:
Error: [$injector:modulerr] Failed to instantiate module chart.js due to:
Error: [$injector:nomod] Module 'chart.js' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs/1.2.6/$injector/nomod?p0=chart.js
    at http://localhost/lib/angular/angular.js:78:12
    at http://localhost/lib/angular/angular.js:1526:17
    at ensure (http://localhost/lib/angular/angular.js:1451:38)
    at module (http://localhost/lib/angular/angular.js:1524:14)
    at http://localhost/lib/angular/angular.js:3614:22
    at Array.forEach (native)
    at forEach (http://localhost/lib/angular/angular.js:302:11)
    at loadModules (http://localhost/lib/angular/angular.js:3608:5)
    at http://localhost/lib/angular/angular.js:3615:40
    at Array.forEach (native)
http://errors.angularjs/1.2.6/$injector/modulerr?p0=chart.js&p1=Error%3…ngular%2Fangular.js%3A3615%3A40%0A%20%20%20%20at%20Array.forEach%20(native)
    at http://localhost/lib/angular/angular.js:78:12
    at http://localhost/lib/angular/angular.js:3642:15
    at Array.forEach (native)
    at forEach (http://localhost/lib/angular/angular.js:302:11)
    at loadModules (http://localhost/lib/angular/angular.js:3608:5)
    at http://localhost/lib/angular/angular.js:3615:40
    at Array.forEach (native)
    at forEach (http://localhost/lib/angular/angular.js:302:11)
    at loadModules (http://localhost/lib/angular/angular.js:3608:5)
    at createInjector (http://localhost/lib/angular/angular.js:3548:11)
http://errors.angularjs/1.2.6/$injector/modulerr?p0=mean&p1=Error%3A%20…njector%20(http%3A%2F%2Flocalhost%2Flib%2Fangular%2Fangular.js%3A3548%3A11)

• javascript
• angularjs
• charts
• angular-chart

Share Improve this question Follow edited Jul 3, 2015 at 6:56 Md Nazmul Hossain asked Jul 3, 2015 at 6:51 Md Nazmul HossainMd Nazmul Hossain 2,94355 gold badges2929 silver badges5151 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

you must add script to chartjs file

<script src="bower_ponents/Chart.js/Chart.min.js"></script>

<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<script src="http://cdn.jsdelivr/angular.chartjs/latest/angular-chart.min.js"></script> 

It worked for me after including files as shown above.

I had the same problem but after switching the order, by making Chart.js (or Chart.min.js) before angular-chart's script, it worked perfectly. In angular-chart site, in the installation chart.js is the ham of the sandwish. Not sure why though.

<script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script>
<script src="node_modules/chart.js/Chart.min.js"></script>
<script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script>

If you want to use full version of Chart.js instead of min you have to use Chart.bundle.js which you can download from its homepage.