CODEWITHSUNDEEP
angularjschart.js
Shan Peiris
Shan Peiris

Reputation: 183

Angular-charts/Chart.js is not working

I wanted to involved Charts in my application.so i installed Angular-chart.js. the approach is very simple as i understood.but it gives following error.

index

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

app.js

angular.module('EventReplayingApp', ['ngRoute', 'appRoutes','chart.js']);

error

enter image description here

enter image description here

does anyone have an idea?

Thanks

Upvotes: 0

Views: 1772

Answers (2)

Sajeetharan
Sajeetharan

Reputation: 222722

You can use the same way, make sure that angular-charts and chart.js should have the correct versioned library references.

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

DEMO

(function(angular) {
  'use strict';
  angular.module('myApp', ['chart.js'])
  .controller('myController', [function() {
    var ctrl = this;
    ctrl.socialChart = {
      options : {
        scales: {
          xAxes: [{
            stacked: true,
          }],
          yAxes: [{
            stacked: true
          }]
        }
      },
      type: 'StackedBar',
        labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
        series: ['FACEBOOK', 'GOOGLE', 'TWITTER', 'INSTAGRAM'],
        colors: ['#ED402A', '#F0AB05', '#A0B421', '#00A39F'],
        data : [
      [65, 59, 90, 81, 56, 55, 40],
      [28, 48, 40, 19, 96, 27, 100]
    ]
    }
  }]);

})(window.angular);
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Multi Slot Transclude</title>
  <script src="//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>

Upvotes: 2

ɢʀᴜɴᴛ
ɢʀᴜɴᴛ

Reputation: 32889

I'm assuming, you are using AngularJS, not Angular 2/4. If that's the case, then you should use CDN links for chart library references.

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

the chart library sources you are currently using, are for node.js

Upvotes: 1

Related Questions