error : “Uncaught TypeError: Cannot read property 'length' of null” Chart.js

I made several graphic with Chart.js that works. But the polar graphic and the radar does not work. I get the following error : "Uncaught TypeError: Cannot read property 'length' of null"

I use charjs 2.3.0

I do not understand where the error can come .

<div class="col-lg-6 col-md-6">
     <canvas class="box box-warning" id="myChart4" width="400" height="400"></canvas>
</div>

<div class="col-lg-6 col-md-6">
     <canvas class="box box-warning" id="myChart5" width="400" height="400"></canvas>
</div>

//////////////////////////////////////////////
// Chart Polar
//////////////////////////////////////////////

var ctx = document.getElementById("myChart4");

new Chart(ctx, {
    type: 'polarArea',
    data: {
        labels: [
            "Red",
            "Blue",
            "Yellow"
        ],
        datasets: [{
            data: [300, 50, 100],
            backgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#FFCE56"
            ],
            hoverBackgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#FFCE56"
            ]
        }]
    },
    options: {
        cutoutPercentage: 50,
        animation: {
            animateScale: false
        }
    }
});

//////////////////////////////////////////////
// Radar
//////////////////////////////////////////////

var ctx = document.getElementById("myChart5");


var scatterChart = new Chart(ctx, {
    type: 'radar',
    data: data = {

        labels: ["Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi", "Dimanche", ],
        datasets: [{
            label: 'the first dataset',
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgba(255,99,132,1)',
            data: [10, 34, 50, 34, 56, 65, 43]
        }, {
            label: 'the second dataset',

            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',

            data: [54, 72, 100, 36, 76, 23, 21]
        }]
    },
    options: {
        scales: {
            xAxes: [{
                type: 'linear',
                position: 'bottom'
            }]
        }
    }
});

Answers:

Answer

the problem is this line:

var ctx = document.getElementById('sexe');

you do not have any element with id "sexe" on the page

Answer

The error was due to the element not being present in the HTML when Chart.js was trying to attach the chart on it.

Answer

If u are using Angular 2+, try to build the options and data chart in. I needed to do this because I used an @Input() attribute to get the data shown in the chart:

    ngOnChanges(changes: SimpleChanges){
      this.options = {
       responsive: true,
       maintainAspectRatio: false,
       ...
      }
    } 

That's works for me. Hope it helps someone.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.