Chartjs-Uncaught TypeError: Cannot read property 'draw' of undefined for object scale

by

0👍

draw is a Chart.js method—are you sure that you have included all of the dependencies?

<script type="text/javascript" src="js/Chart.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/tc-angular-chartjs.js"></script>

You will also need to list it as a requirement of your app/angular.module:

angular.module( 'main', ['tc.chartjs']);

0👍

Make sure you have a compatible version of Chart.js. Version 1.0.2 works ok for the example you have with tc-angular v1.0.11

Make sure you have no other libraries loaded (at least to start with), apart from angular, tc-angular and Chart.js.

0👍

Trying to reproduce your error, I shortly had exactly the same problem – but after just running $ bower install tc-angular-chartjs and copying in all your code this is the result, which just works fine. It also includes the required scripts and the module dependency as shown in the tutorial and mentioned by Tina

<!Doctype html>
<html>
<body>
<div ng-app="main">
  <div ng-controller="AboutController">
    <canvas tc-chartjs-doughnut chart-options="options" chart-data="data" auto-legend></canvas>
  </div>
</div>
<script src="bower_components/Chart.js/Chart.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/tc-angular-chartjs/dist/tc-angular-chartjs.min.js"></script>
<script>
  angular
      .module('main', ['tc.chartjs'])
      .controller('AboutController', ['$scope', function ($scope) {
        $scope.data = [
          {
            value: 300,
            color: '#F7464A',
            highlight: '#FF5A5E',
            label: 'Red'
          },
          {
            value: 50,
            color: '#46BFBD',
            highlight: '#5AD3D1',
            label: 'Green'
          },
          {
            value: 100,
            color: '#FDB45C',
            highlight: '#FFC870',
            label: 'Yellow'
          }
        ];

        // Chart.js Options
        $scope.options = {

          // Sets the chart to be responsive
          responsive: true,

          //Boolean - Whether we should show a stroke on each segment
          segmentShowStroke: true,

          //String - The colour of each segment stroke
          segmentStrokeColor: '#fff',

          //Number - The width of each segment stroke
          segmentStrokeWidth: 2,

          //Number - The percentage of the chart that we cut out of the middle
          percentageInnerCutout: 50, // This is 0 for Pie charts

          //Number - Amount of animation steps
          animationSteps: 100,

          //String - Animation easing effect
          animationEasing: 'easeOutBounce',

          //Boolean - Whether we animate the rotation of the Doughnut
          animateRotate: true,

          //Boolean - Whether we animate scaling the Doughnut from the centre
          animateScale: false,

          //String - A legend template
          legendTemplate: '<ul class="tc-chart-js-legend"><% for (var i=0; i<segments.length; i++){%><li><span style="background-color:<%=segments[i].fillColor%>"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>'

        };
      }]);
</script>
</body>
</html>

Leave a comment