[Chartjs]-ReferenceError: Chart is not defined – chartjs

by

10👍

✅

here is a working jsfiddle of your code:
new Chart(rice).Line(riceData);
http://jsfiddle.net/mahmalsami/jqcthmyo/
So the problem is definitively coming from your external Chart.min.js inclusion

You may find a 404 on your js get. Please make sure you’re linking to the correct js folder. (try accessing your localhost/Chart.min.js to see if you can access to your file)

14👍

I was also getting same error. To fix this I moved the chart script into separate graph.js file.

Still I was getting same error. Which is fixed later when I put tag in following order before end of tag as shown below.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script type="text/javascript" src="jscript/graph.js"></script>
</body>

The page look like this:
enter image description here

var ctx = document.getElementById("myChart").getContext('2d');
  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
                  }
              }]
          }
      }
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<!DOCTYPE html>

<canvas id="myChart"></canvas>

7👍

I got the same error. To solve the problem, you have to include the chart.js library correctly as follows:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>

1👍

1) I tried Chart.js downloaded from Chartjs.org.
But, it’s not working.

2) Try to this.

<script type="text/javascript" src="http://www.chartjs.org/assets/Chart.js">
</script>

Working good.

1👍

This error shows you did not install the plugin that helps run the Chart.js library on the HTML page.
if that script is not present, this error shows which version you used Chart.js then that version script is pasted in it.

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

It will help you solve the problem. It comes in many versions like

<script src="https://cdn.jsdelivr.net/npm/chart.js/Chart.min.js"></script>

0👍

If you’re seeing this intermittently on Ruby on Rails 5, like I was, the issue was to do with Turbolinks, which I disabled. Works great now!

0👍

Have run into this problem two times with Chartjs and solved both by using setTimeout to delay the call of the function that is causing the error.

0👍

I think it’s a bit late to answer this question, but the way it worked for me, having the same problem, is to put the CDN after the code to graph, put it before, you can’t call an object without declaring it.

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script>
    // Code to graphic...
    // Check Chart.js Doc (v3.9.1)
    // https://www.chartjs.org/docs/latest/getting-started/
<script>

0👍

Give a small timeout before chart creation.

$(document).ready(function(){
setTimeout(function(){
     var ctx = document.getElementById("myChart").getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: ["M", "T", "W", "T", "F", "S", "S"],
            datasets: [{
                    backgroundColor: [
                        "#2ecc71",
                        "#3498db",
                        "#95a5a6",
                        "#9b59b6",
                        "#f1c40f",
                        "#e74c3c",
                        "#34495e"
                    ],
                    data: [12, 19, 3, 17, 28, 24, 7]
                }]
        }
    });

},100);
});

0👍

I got the same problem in my vue js application.
Solved it by registering the LinearScale component

import { Chart as ChartJS, ArcElement, Tooltip, Legend, LinearScale } from 'chart.js'

ChartJS.register(ArcElement, Tooltip, Legend, LinearScale);

-3👍

This is very basic error which should be taken care off at very start of the document.
Make sure you properly install chartjs library whether you want it like cdn/npm pacakge,etc. follow the documentation: https://www.chartjs.org/docs/latest/getting-started/installation.html

Leave a comment