Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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/

like image 804
ohadinho Avatar asked Jun 01 '16 17:06

ohadinho


4 Answers

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.

like image 73
Traveling Tech Guy Avatar answered Oct 06 '22 21:10

Traveling Tech Guy


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

like image 38
user3094755 Avatar answered Oct 06 '22 22:10

user3094755


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.

like image 2
Menelaos Kotsollaris Avatar answered Oct 06 '22 22:10

Menelaos Kotsollaris


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

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

like image 2
Thushara Buddhika Avatar answered Oct 06 '22 22:10

Thushara Buddhika