Angular Chart JS error angular-master.js:114 Error: [$injector:unpr]

Question

I am working on Chart.js with Angular.JS my Angular app is looking like below

angular.module('inspinia').controller('dashboardController', ['$rootScope', '$scope', '$http','chart.js', function($rootScope, $scope, $http) {
console.log("123");
$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]];

My HTML code is looking like below

<div class="text-center">
<canvas id="bar" class="chart chart-bar"chart-data="data" chart-labels="labels"> chart-series="series"
</canvas>
</div>

I am getting two errors

Uncaught TypeError: Cannot set property 'mode' of undefined

and other is

Error: [$injector:unpr]

http://errors.angularjs.org/1.5.0/$injector/unpr?p0=chart.jsProvider%20%3C-hart.js%20%3C-%dashboardController

Please help me with this

Thanks in advance

Abhishek Parikh · Accepted Answer · 2016-12-29 13:03:13Z

1

Make sure you have refered the libraries correctly,

Working DEMO

(function(angular) {
  'use strict';
  angular.module('myApp', ['chart.js'])

  .controller('myController', [function() {
    var ctrl = this;
    ctrl.socialChart = {
      type: 'bar',
        labels: ['2006', '2007', '2008', '2009', '2010', '2011', '2012'],
        series: ['Series A', 'Series B'],
        colors: ['#ED402A', '#F0AB05', '#A0B421', '#00A39F'],
        data :  [[65, 59, 80, 81, 56, 55, 40],[28, 48, 40, 19, 86, 27, 90] ]
      }

  }]);

})(window.angular);

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <title>Multi Slot Transclude</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>    <script src="app.js"></script>
  </head>

  <body ng-app="myApp" ng-controller="myController as ctrl">
    <canvas id="outreach" class="chart chart-bar" 
        chart-labels="ctrl.socialChart.labels" 
        chart-data="ctrl.socialChart.data" 
        chart-series="ctrl.socialChart.series"
        chart-colors="ctrl.socialChart.colors"
        chart-options="ctrl.socialChart.options"></canvas>      
  </body>

</html>

edited Dec 29, 2016 at 13:03

Abhishek Parikh

9891 gold badge22 silver badges42 bronze badges

answered Dec 29, 2016 at 10:36

Sajeetharan

223k65 gold badges369 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Abhishek Parikh Over a year ago

Thanks for answer I've referd libraries in my Angular app.

Abhishek Parikh Over a year ago

I've replaced my code with yours but getting same errors

Sajeetharan Over a year ago

@AbhishekParikh do you have teamvieweR?

Abhishek Parikh Over a year ago

Yes I have Teamviewer

Abhishek Parikh Over a year ago

I may have done some mistake else.. Your code is working on snippet so it would be perfect.. Thanks @Sajeetharan

|

Collectives™ on Stack Overflow

Angular Chart JS error angular-master.js:114 Error: [$injector:unpr]

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related