[Chartjs]-Chart JS Error: Chart is not defined Firefox

by

1👍

✅

This is because, ChartJS library is not being loaded by the time you are creating the chart.

You should rather initialize your chart on window onload event, like so …

var app = angular.module('app', []);

app.controller("myCtrl", function($scope) {

   $scope.load = function() {
      var myChart = new Chart(canvas, {
         type: 'line',
         data: {
            labels: ['Jan', 'Feb', 'Mar'],
            datasets: [{
               label: 'Player Count',
               data: [1, 2, 3],
               backgroundColor: "rgba(153,255,51,0.6)"
            }]
         },
         options: {
            tooltips: {
               titleFontSize: 29,
               bodyFontSize: 29
            },
            scales: {
               xAxes: [{
                  display: true,
                  gridLines: {
                     display: true
                  },
                  ticks: {
                     fontColor: '#000000'
                  },
                  scaleLabel: {
                     display: true,
                     labelString: 'Date',
                     fontColor: '#000000'
                  }
               }],
               yAxes: [{
                  display: true,
                  gridLines: {
                     display: true
                  },
                  ticks: {
                     fontColor: '#000000'
                  },
                  scaleLabel: {
                     display: true,
                     labelString: 'Player Count',
                     fontColor: '#000000'
                  }
               }]
            }
         }
      });
   }
   
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
   <canvas id="canvas" ng-init="load()"></canvas>
</div>

1👍

You have to provide the path to chart.js without / at the beginning.

<script src="libs/Chart.js/2.1.4/Chart.min.js"></script>

Leave a comment