current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

I want to use angular-chart.js so I followed the installation instructions first I downloaded the latest version from github of Charts.js https://github.com/chartjs/Chart.js and then I downloaded the latest version of angular-charts.js from github https://github.com/jtblin/angular-chart.js.

I copy and pasted this files into my project:

This file is from chart.js chart.js (I copied this file from chart.js notice that the first letter is in lower case)

THis file is from angular-chart.js angular-chart.min.js

Included both like this 

<script src="/myApp/chart.js"></script>
<script src="/myApp/angular-chart.min.js"></script>

and then I added this directive to my app 

angular.module('myApp',
    [
        'zingchart-angularjs',
        'oitozero.ngSweetAlert',
        'chart.js'
    ])

But I get this error 

chart.js:4 Uncaught ReferenceError: require is not defined(anonymous    function) @ chart.js:4
angular-chart.min.js:10Uncaught Error: Chart.js library needs to be included, see http://jtblin.github.io/angular-chart.js/
angular.min.js:6 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.7/$injector/modulerr?
share|improve this question
up vote 0 down vote

I think you have downloaded the wrong Chart.js, this error: chart.js:4 Uncaught ReferenceError: require is not defined(anonymous function)... comes from the missing of require function that works natively only for node.js, to work on browser it should use browsefy or equivalent. Therefore I supose you don't have the production chart.js, as you can see on the snippet, using the CND for both angularjs, chart.js and angular-chart, it worked perfectly.

  • Chart.js https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js
  • Angular-chart //cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js

angular.module('app', ['chart.js']);

angular.module('app')
  .controller('MyController', function ($scope, $timeout) {
    $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
    $scope.series = ['Series A', 'Series B'];
    $scope.data = [
      [65, 59, 80, 81, 56, 55, 40],
      [28, 48, 40, 19, 86, 27, 90]
    ];
    $scope.onClick = function (points, evt) {
      console.log(points, evt);
    };

    // Simulate async data update
    $timeout(function () {
      $scope.data = [
        [28, 48, 40, 19, 86, 27, 90],
        [65, 59, 80, 81, 56, 55, 40]
      ];
    }, 3000);
  });

angular.element(document).ready(function(){
  angular.bootstrap(document, ['app']);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js"></script>
<script src="//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
<div ng-controller="MyController">
  <canvas class="chart chart-line" chart-data="data" chart-labels="labels" 
    chart-series="series" chart-click="onClick"></canvas> 
</div>

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.