Issue with Chart JS: Firefox is reporting that the 'Chart' is not defined

As a newcomer to Chart JS, I am currently utilizing it in Angular JS version 1.5.3 with Chart JS version 2.1.4. Below is the code snippet I am working with:

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'
      }
    }]
  }
}

});

While my chart appears correctly in Chrome, I encounter an error when using Firefox:

Error: Chart is not defined

I am uncertain about the cause of this issue, any assistance would be greatly appreciated. Thank you.

javascriptangularjschart.js

Answer №1

The reason for this issue is that the ChartJS library is not loaded at the time when you are trying to create the chart.

It is recommended to initialize your chart on the window onload event, as shown below:

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

In order to properly reference the chart.js file, make sure not to include a leading / in the path.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Access-Control-Allow-Origin policy does not permit requests from applications running with an origin of null, specifically for those using a file:// URL

I am in the process of creating a webpage that utilizes jQuery's AJAX feature to fetch images from both Flickr and Panoramio. While the image retrieval from Flickr is functioning properly, I encounter an issue when attempting to use $.get(url, callba ...

javascriptjqueryxmlhttprequestcorsjsonp

What is the best method for assigning a default value to the file input tag in HTML?

Can anyone help me with this code snippet? <input name="GG" type="file" value="< ?php echo $data['image'] ?>"> I was trying to set a default value in the form edit, but it seems to not be working. Does anyone know how to set a defau ...

javascriptphpinputinput-type-file

You can definitely invoke a function within a React hook

This code snippet showcases a component utilizing Hooks in React Native import React, { useEffect, useState } from 'react'; import { StyleSheet, Text, View, TouchableOpacity, Animated } from 'react-native'; import CAStyles fro ...

javascriptreactjsreact-nativereact-hooks

Surprising discovery of the reserved term 'await'

function retrieveUsers() { setTimeout(() => { displayLoadingMessage(); const response = fetch("https://reqres.in/api/users?page=1"); let userData = (await response.json()).data; storeAllUserDa ...

javascriptreactjs

Did the menu get shifted downwards on the mobile version by using bootstrap?

Here is the desktop version of a navigation bar. https://i.sstatic.net/e595L.png This image shows the mobile version after clicking on the hamburger button. https://i.sstatic.net/ng1tK.png I would like the menu to open when I click on the hamburger, bu ...

javascripthtmlcsstwitter-bootstrap

What is the process by which node.js synchronously delivers a response to a REST web service?

Sorry if this question seems obvious! I'm struggling to grasp how node.js handles requests from the browser. I've looked at tutorials online where express.js was used to create the server-side code with node.js. Routes were then set up using prom ...

javascriptnode.jsrestexpresspromise

Testing the units of a system ensures that the flow and data storage are reliable

Currently, I'm facing an interesting challenge when it comes to unit testing and the flux data stores. Because the data stores are singletons that are only instantiated once (upon module import), any changes made during unit tests remain persistent. ...

javascriptunit-testingjasminereactjsreactjs-flux

Is there a way to display only the specific child div within the parent div using JavaScript without affecting the others?

   **** Sorry for the lengthy title **** Today I encountered a problem that I would like to discuss with all of you. When I click on a "COMMENT" button, instead of triggering JavaScript code to display a CHILD.div inside the corresponding ...

javascripthtml

Customize the dynamic options for selecting with Bootstrap

I have been experimenting with the bootstrap select plugin and have run into an issue while trying to dynamically add options using Javascript. Unfortunately, the list always appears empty. Interestingly, when I revert back to using a conventional HTML sel ...

javascriptjqueryhtmltwitter-bootstrap

Cloning a file input does not retain the uploaded file in the cloned input. Only the original input retains the uploaded file

Whenever I duplicate an input type file, I encounter an issue where the uploaded file from the duplicated input is also linked to the original input. It seems like the duplicate input is somehow connected to and taking files for the original one. This is ...

javascriptjqueryfileinputinput-type-file

Executing a Javascript function post AJAX page loading

I'm not a coding expert, so I hope my question is still clear. Essentially, I have an index.php page with filters (by project, year, month) that send variables to filterData.php after clicking submit. These variables are then used in SQL statements t ...

phpjavascriptcssajaxsiblings

What is the best way to eliminate a duplicate item from the shopping cart without actually deleting it?

I developed an e-commerce platform with a cart feature using the context API. However, I encountered an issue where removing one item from the cart also deletes another item if there are two of the same items in the cart. How can this be prevented? Below ...

javascriptreactjs

Utilizing Sequelize to Convert and Cast Data in iLike Queries

When using Sequelize for a full-text search, I encountered an issue with applying the iLike operator to columns of INTEGER or DATE type. How can I cast off a column in this case? To illustrate, here is an example of what I am trying to achieve with a Post ...

javascriptnode.jspostgresqlsequelize.js

Function returning undefined when accessing prototype property in JavaScript

When attempting to create an image rotator using prototypal inheritance, I am encountering an error in the console showing: TypeError: this.curPhoto is undefined this.curPhoto.removeClass('previous'); I have placed this code in the callb ...

javascriptjquerycssprototypeprototypal-inheritance

Building a versatile dropdown menu with ReactJS and creating reusable components

I am currently working on building a dropdown menu following a tutorial, but I have encountered a roadblock. Instead of using the "props" keyword as shown by the instructor in the tutorial, I passed the props directly as arguments without using props dot. ...

javascriptreactjsnext.js

JavaScript Regular Expression Assistance Domain Snatcher

I am in the process of developing a JavaScript Regex and I am struggling to find the right pattern to match a specific domain. Let me provide an example for better understanding. I need a regex that can identify any domain that exclusively contains (text. ...

javascriptregex

Modify an array by incorporating values from another array that have a matching property

I have two arrays that look like this let array1 = [{ 'id': 1, 'name': 'A' }, { 'id': 2, 'name': 'B' }, { 'id': 3, 'name': ' ...

javascriptarraystypescript

Ways to transition into a developer role

I'm currently studying Javascript and Dynamic HTML as part of a course, and while I'm not encountering any errors or warnings in Firefox and Chrome, I believe there might be some issues with my code. If anyone would be willing to take a look and ...

javascriptjquerybootstrap-5

Change the height of textarea dynamically using jQuery

I am trying to create a comment box similar to Facebook's, where it resizes as text fills it using Expanding Text Areas Made Elegant This is how my view looks: <div class='expandingArea'> <pre><span></span></ ...

javascriptjqueryhtmlajax

Establishing data using Vue.js

Apologies for my beginner question, but I have been struggling with a basic issue since yesterday and can't seem to find the solution. I am trying to populate my logs variable with a JSON object and display it in an array. Below is my HTML code : & ...

javascriptrendervue.js