Chart JS Error: Chart is not defined Firefox

Question

I am new to Chart JS, I am currently using it in Angular JS version 1.5.3 and Chart JS I am using version 2.1.4 this is my code below

var myChart = new Chart(ctx, {
type: 'line',
data: {
  labels: dates,
  datasets: [{
    label: 'Player Count',
    data: count,
    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'
      }
    }]
  }
}

});

I am seeing my chart displayed in Chrome, but in Firefox I am getting this error

Error: Chart is not defined

I am not sure what is the reason, any feedback will help thanks

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

Answer 2

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>