How to install Chart.js and angular-chart.js (Error: Chart.js library needs to be included)

4
votes

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?
2
javascriptangularjschartschart.jsangular-chart

2 Answers

7
votes

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>
1
votes

To use in browser.

1 Like Castro said, add in the cdn which is most convinient and easy.

2 You can try pull from NPM. and look into the module and search for "dist" folder, which have distribution file. and call add that file to your source. The version I found have this name "Chart.bundle.js"

>YourProjectFolder
--->index.html
--->Chart.bundle.js

Your index.html file

<head>
  <script src="Chart.bundle.js"></script>
</head>