ReferenceError: Chart is not defined - chartjs

Question

Is there a bug with Chart.js? Every time I add any of the graphs at Chart.js to my website I get an error, but when I used the graph as stand-alone program it runs smoothly without errors. I am using HTML5.

   <html>
   <head>
      <meta charset="utf-8" />
      <title>Rice Consumption</title>
      <script src='Chart.min.js'></script>
    </head>
    <body>

      <canvas id="rice" width="600" height="400"></canvas>

      <script>
        var riceData = {
        labels : ["January","February","March","April","May","June"],
        datasets :
         [
            {
              fillColor : "rgba(172,194,132,0.4)",
              strokeColor : "#ACC26D",
              pointColor : "#fff",
              pointStrokeColor : "#9DB86D",
              data : [203000,15600,99000,25100,30500,24700]
            }
         ]
        }

          var rice = document.getElementById('rice').getContext('2d');
               new Chart(rice).Line(riceData);
    </script>
    </body>
    </html>

SOLVED: I just decoupled the script from the canvas element (made another file for the script to execute its function).

Updated HTML:

      <html>
      <head>
      <meta charset="utf-8" />
      <title>Rice Consumption</title>
      <script src='Chart.min.js'></script>
      </head>
      <body>
      <canvas id="rice" width="600" height="400"></canvas>
      <script src='Chart.min.js'></script>
      <script src='rice.js'></script>
      </body>
      </html>

New JavaScript file:

var riceData = {
    labels : ["January","February","March","April","May","June"],
    datasets : [
        {
            fillColor : "rgba(172,194,132,0.4)",
            strokeColor : "#ACC26D",
            pointColor : "#fff",
            pointStrokeColor : "#9DB86D",
            data : [203000,15600,99000,25100,30500,24700]
        }
    ]
}

var rice = document.getElementById('rice').getContext('2d');
new Chart(rice).Line(riceData);

Please add some details as to how exactly you linked ChartJS. Where’s the <script> tag? — Sebastian Simon
– Sebastian Simon, Commented Apr 22, 2015 at 0:34
include your JS with the correct type. <script type="text/javascript" src="Chart.min.js"></script> What is displayed in your console ? any 404 on your Chart.min.js file? — Mahmal Sami
– Mahmal Sami, Commented Apr 22, 2015 at 1:13
@SamiX the type attribute on <script> tags is optional. It shouldn’t matter. — Sebastian Simon
– Sebastian Simon, Commented Apr 22, 2015 at 1:21

Rahul Varadkar · Accepted Answer · 2017-07-03 15:33:14Z

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:

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>

Fa11enAngel · Accepted Answer · 2022-01-11 10:10:04Z

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)

edited Jan 11, 2022 at 10:10

Fa11enAngel

4,8402 gold badges42 silver badges41 bronze badges

answered Apr 22, 2015 at 9:07

Mahmal Sami

7097 silver badges12 bronze badges

3 Comments

FRECEENA FRANCIS Over a year ago

I have used <script src="cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/…> but my bootstrap template is not working. <script src="build/js/custom.min.js"></script> , this tag seems to be disabled. Could you please suggest me any ideas for enable it?

Mahmal Sami Over a year ago

@FRECEENAFRANCIS, example using your <script> jsfiddle.net/mahmalsami/mxre34b0/6

innocent Over a year ago

The fiddle is not working now for some reason

Sai · Accepted Answer · 2019-04-05 06:42:10Z

10

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>

edited Apr 5, 2019 at 6:42

Sai

2,6685 gold badges34 silver badges49 bronze badges

answered Jan 8, 2019 at 3:46

Sidi M. Aourid

1011 silver badge3 bronze badges

1 Comment

avr-girl Over a year ago

For me it was a versioning problem - This version worked for me in .NET MVC <script src="cdn.jsdelivr.net/npm/[email protected]/dist/…>; the latest 4.4.3 version did not

Haroldo Gondim · Accepted Answer · 2016-03-18 02:10:13Z

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.

edited Mar 18, 2016 at 2:10

Haroldo Gondim

8,04111 gold badges46 silver badges64 bronze badges

answered Mar 18, 2016 at 1:47

김강욱

271 bronze badge

1 Comment

user3676604 Over a year ago

New way of adding it is via the CDN: <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.2/Chart.min.js"></script>

legoblocks · Accepted Answer · 2019-08-12 07:02:38Z

1

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!

answered Aug 12, 2019 at 7:02

legoblocks

5951 gold badge6 silver badges21 bronze badges

Comments

Pankaj Sajekar · Accepted Answer · 2023-01-10 12:21:12Z

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>

edited Jan 10, 2023 at 12:21

answered Apr 8, 2022 at 10:47

Pankaj Sajekar

786 bronze badges

1 Comment

Ricky Levi Over a year ago

The issue is, chart.min.js is actually trying to "import" stuff, while i'm using plain JS there's not "import" in my case ... so it didn't work. the version of libs/Chart.js/4.2.1/chart.umd.min.js or Chart.min.js works - because this is a compiled suitable JS file that doesn't import - just bundled with everything, so it will work.

sojourner · Accepted Answer · 2021-04-21 02:11:30Z

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.

answered Apr 21, 2021 at 2:11

sojourner

1

1 Comment

ralismark Over a year ago

While this may work, it's not that robust of a solution -- changes in how long various bits of code take could cause this to stop working.

Minor · Accepted Answer · 2022-09-08 23:58:35Z

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/[email protected]/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>

answered Sep 8, 2022 at 23:58

Minor

1013 bronze badges

Comments

Deepak K L · Accepted Answer · 2022-10-06 10:06:44Z

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); });

Eishfaq Ahmed · Accepted Answer · 2023-05-02 05:49:08Z

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);

answered May 2, 2023 at 5:49

Eishfaq Ahmed

1571 silver badge7 bronze badges

Comments

SHUBHAM METKAR · Accepted Answer · 2021-09-17 04:10:23Z

-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

answered Sep 17, 2021 at 4:10

SHUBHAM METKAR

94 bronze badges

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

ReferenceError: Chart is not defined - chartjs

11 Answers 11

Comments

3 Comments

1 Comment

1 Comment

Comments

1 Comment

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

Comments

3 Comments

1 Comment

1 Comment

Comments

1 Comment

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related