Uncaught Referenceerror: Chart is not defined

Asked

Viewed 1,178 times

0

I’m following the documentation Chats.js to implement graphics in my code the structure of my HTML is very simple

<html>
  <head>
    <script type="text/javascript" src="./chart.js"></script> //Esse eu baixei através da documentação deles
    <script type="text/javascript" src="./index.js"></script>
  </head>
  <body>
    <canvas id="myChart" width="400" height="400"></canvas>
  </body>
</html>

And in my javascript index.js is as follows

var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

But when I run the code in my browser nothing happens, when inspecting the elements with the browser console and go in the file index.js I see the following error message Uncaught ReferenceError: Chart is not defined , in my view the import is correct as the Chart.js file is being imported, I am doing something wrong?

javascript chartjs

  • Apparently the error is that you used the css import tag (<link>) instead of the javascript import tag (<script>).

  • @Benilson

3 answers

3


Check which version of the file you downloaded, in the example below I used version 2.8.0 and it worked correctly:

See here the files https://cdnjs.com/libraries/Chart.js

var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
  </head>
  <body>
    <canvas id="myChart" width="400" height="400"></canvas>
  </body>
</html>

  • I did the same test here and it also worked. Check the Chart.js file

  • @Marciano Machado, I just made the same test with the version of the CDN that indicated me and the result still came in blank. But with this I had an idea. I did exactly as you did in your example, put the script on the same page and the graph appeared. But I need it to come from an external file to include the graphic as I have a lot of information on this page and would get badly polluted

  • I was able to solve the problem, when I was inserting the chat.js scripts straight into the head it was not having time to load, I changed the import to leave inside the body and it worked. Thanks for the help! (I’ll give an up vote on your answer because it is correct and functional but does not solve my problem)

1

It was only necessary to change the place of import. From what I understood keeping the plugin in the header he had no time to load completely and so returned the error Uncaught ReferenceError: Chart is not defined 

<html>
  <head>
  </head>
  <body>
    <canvas id="myChart" width="400" height="400"></canvas>
    <script type="text/javascript" src="./chart.js"></script>
    <script type="text/javascript" src="./index.js"></script>
  </body>
</html>

The index.js file has not been changed

0

It is only necessary to change the import location, keeping the plugin in the header it does not have time to load completely and so returns the error Uncaught ReferenceError: Chart is not defined 

<html>
  <head>
  </head>
  <body>
    <canvas id="myChart" width="400" height="400"></canvas>
    <script type="text/javascript" src="./chart.js"></script>
    <script type="text/javascript" src="./index.js"></script>
  </body>
</html>

The index.js file has not been changed

Browser other questions tagged javascript chartjs

You are not signed in. Login or sign up in order to post.