ChartJs Angular directive - chart[chartType] is not a function

Question

I'm having problems getting a simple chart to work using angular.

I have chart JS set up using "angular-chartjs-directive": "^1.0.0" within my bower. This gets injected correctly based on the source of my file.

I then have this as my controller:

export class MainController {
  constructor ($scope) {
    'ngInject';
    this.createGraph($scope);
  }

  createGraph($scope) {
    var vm = this;
    vm.messages = [{msg: "hello"}];

    var data = {
      labels : ["January","February","March","April","May","June","July"],
      datasets : [
        {
          fillColor : "rgba(220,220,220,0.5)",
          strokeColor : "rgba(220,220,220,1)",
          pointColor : "rgba(220,220,220,1)",
          pointStrokeColor : "#fff",
          data : [65,59,90,81,56,55,40]
        },
        {
          fillColor : "rgba(151,187,205,0.5)",
          strokeColor : "rgba(151,187,205,1)",
          pointColor : "rgba(151,187,205,1)",
          pointStrokeColor : "#fff",
          data : [28,48,40,19,96,27,100]
        }
      ]
    }

    $scope.myChart = data;
  }

}

And this in my main html:

<div class="container">
  <chart value="myChart"></chart>
</div>

But I get the error:

TypeError: chart[chartType] is not a function

Any ideas?

score 0 · Accepted Answer · answered Dec 30 '16 at 12:42

Make sure you have refered the libraries correctly,

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>

Thanks for this. I found a way to get it working. I changed the chart.js version to 1.1.1 and then instead of this line: $scope.myChart = data; I used: $scope.myChart = {"data": data, "options": {} } — Darren Keen., Dec 30 '16 at 13:03

ChartJs Angular directive - chart[chartType] is not a function

1 Answers1