CODEWITHSUNDEEP
javascriptchart.js
Hachem Benyahia
Hachem Benyahia

Reputation: 191

Error with Chart.js : TypeError: t is undefined

I keep getting this error and I wasn't able to display a Chart.js chart yet, although I have tried multiples codes I found on the internet.

Here is the relevant part of the HTML :

<head>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
    ...
</head>

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

Here is the javascript : 

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

I found that example here : http://www.chartjs.org/docs/

And I get this error in the console :

TypeError: t is undefined

Can someone help please ? Thanks.

Upvotes: 6

Views: 23352

Answers (3)

Eric
Eric

Reputation: 742

I'm using 2.8.0 (current latest). Earlier versions as suggested here did not help.

The solution to this error for me was providing the correct element ID for the context. I was giving new Chart() "chartjs-1" because I blindly copied an example, but my canvas ID was "myCanvas". Giving new Chart() the actual ID of my canvas fixed the problem.

Note, the error in the question is from Firefox. Chrome gave a different error that clued me into the real culprit: Cannot read property 'length' of null

Upvotes: 1

maaaddog
maaaddog

Reputation: 21

Put the javascript code (start with <script type="text/javascript">var ctx ...</script>) after the canvas element. This ensures that the canvas element is already present at the time when it gets referenced by var ctx = document.getElementById("myChart");

This should solve your problem.

Upvotes: 2

Hachem Benyahia
Hachem Benyahia

Reputation: 191

Solved, apparently the script link I was using was bugged. Changed it to https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js and it works fine. See Chris G's comment.

Upvotes: 4

Related Questions