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

by

7👍

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👍

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>

Leave a comment