[Chartjs]-Problems with ChartJS "Uncaught TypeError: Cannot read property 'length' of null"

by

0👍

I believe that the answer is that the tag appears after the Chart code that is trying to get a context to it. Here’s an example of an HTML page where the tag is correctly placed. After checking the chartjs documentation it doesn’t appear to state explicitly about the importance of the order of the script and the tag.

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>Chart Test App</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</head>

<body>
<b>Chart Example</b>

<!--  It's critically important that the <canvas> tag appears before the script where the chart context is created
      If the <canvas> tag appears after the chart context you will receive a 
      "Uncaught TypeError: Cannot read property 'length' of null" error -->

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

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

</body>
</html>

Leave a comment