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

Question

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

Answer 1

the problem is this line:

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

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