Firebase и Chart.js - данные, извлеченные из базы данных в массив, не отображаются на графике

Question

Я пишу код для чтения значений из моей базы данных Firebase, сохраняю их в массив, а затем подключаю мой массив к коду Chart.js для отображения моих данных на графике.Но мой график становится пустым.

Сначала я создаю снимок значений в базе данных и помещаю их в новый массив genderData.Затем я подтвердил, что массив был заполнен console.log(genderData) (см. Ниже).Насколько я могу судить, массив был заполнен:

Мой журнал консоли:

Затем я вошел в консоль вне моего вызова ref в базу данных,и это выглядит так:

Мой код для извлечения данных из базы данных:

var rootRef = firebase.database().ref().child('counters');

// Get counter values.
var genderData = [];

rootRef.once('value').then(function(snapshot){
    genderData.push(snapshot.val()['Male']);
    genderData.push(snapshot.val()['Female']);
    genderData.push(snapshot.val()['Nonbinary']);
    genderData.push(snapshot.val()['Other']);
    genderData.push(snapshot.val()["Didn't Say"]);
    console.log(genderData);
})
console.log(genderData);

Затем я создалобычная гистограмма с Chart.js, и попытался вставить genderData в график:

// Bar graph displaying the total number of students by gender.
var ctx = document.getElementById("myChart4").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Male", "Female", "Non-Binary", "Other", "Unspecified"],
        datasets: [{
            data: genderData,
            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: {
        title: {
            display: true,
            text: 'Total Students by Time Taken to Complete Degree'
        },
        legend:{
            display: false
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

Но мой график пуст:

РЕДАКТИРОВАТЬ :

При дальнейшей проверке я заметил, что значения отображаются ... вроде.

Так что, похоже, мои данные просто не создают "полосу" графика?И мои значения y начинаются с 0.0 и заканчиваются на 1.0, и я понятия не имею, почему.