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

Question

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

5k views Asked by Justin A At 18 September 2024 at 05:16

I am following the Chart.js example. But when I try to render thaat example, I get the following error:

Uncaught TypeError: Cannot read property 'draw' of undefined

Here is the example I am following. I've done everything accordingly and I have no idea why it would be causing this problem. http://carlcraig.github.io/tc-angular-chartjs/doughnut/

Below is my implementation of the example. My module

angular.module('main')
    .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>'

    };
    }]);

And here is my html code

<canvas tc-chartjs-doughnut chart-options="options" chart-data="data" auto-legend></canvas>

I should add that I am able to render the legend for the chart. Legend

Original Q&A

There are 3 answers

**Tina** · Answer 1 · 2015-06-08 23:27:44

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']);

**potatopeelings** · Answer 2 · 2015-06-09 10:17:46

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.

**Kevin Sandow** · Answer 3 · 2015-06-09 16:54:39

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>

TechQA.

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

There are 3 answers

Related Questions in CHART.JS

Related Questions in ANGULAR-CHART

Popular Questions

Popular Tags

Trending Questions