CODEWITHSUNDEEP
javascriptjquerychart.js
ohadinho
ohadinho

Reputation: 7144

Uncaught TypeError: Cannot read property 'offsetWidth' of undefined - chart.js

I have this simple html:

<canvas id="myChart" width="400" height="400"></canvas>

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

Even though the canvas is configured with myChart id, I get the following error:

Uncaught TypeError: Cannot read property 'offsetWidth' of undefined

JSFiddle: https://jsfiddle.net/kroejrhx/

Upvotes: 16

Views: 21366

Answers (4)

Thushara Buddhika
Thushara Buddhika

Reputation: 1820

Use this : var ctx = document.getElementById("myChart").getContext("2d");

Instead of : var ctx = document.getElementById("myChart");

Upvotes: 2

Menelaos Kotsollaris
Menelaos Kotsollaris

Reputation: 5506

You have to use the version 2 of chart.js. If you are using npm, in your package.json, update chart.js e.g., "chart.js": "^2.1.1",. In case you use react-chartjs-2, you will still need to make sure that your chart.js version is 2 or bigger.

Upvotes: 2

user3094755
user3094755

Reputation: 1641

If you want to use Chart.js v2.0 then this CDN will work.

https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js

Upvotes: 4

Traveling Tech Guy
Traveling Tech Guy

Reputation: 27809

After revisiting the question, here's your problem: you are using the wrong version of chart.js. According to this section, if you want to use an axis that's time based, you either need to explicitly include moment.js, or use the bundle version.

Changing the resource in your jsfiddle to https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js will show the expected chart. No need to change the code at all.

Upvotes: 39

Related Questions