Chart.js не показывает динамически заполненные данные

У меня возникли проблемы при попытке динамического заполнения гистограммы в chart.js. У меня есть два массива, один для ярлыка, один по цене, и оба они уже заполнены отсортированными данными из firebase. Вот мой код:

var ctx = document.getElementById('brandChart').getContext("2d");

        var data = {
            labels: [],
            datasets: [{
            data: [],
            backgroundColor: [
                "#424242",
                ]
            }]
        };

        var options = {
            layout: {
                padding: {
                  top: 5
                }
            },
            responsive: true,
            legend: {
                display: true,
                position: 'bottom',
                // disable legend onclick remove slice
                onClick: null
            },
            animation: {
                animateScale: true,
                animateRotate: true
            },
        };

        var opt = {
          type: "horizontalBar",
          data: data,
          options: options
        };

        if (brandChart) brandChart.destroy();
        brandChart = new Chart(ctx, opt);

        // dynamically populate chart
        for(var i = 0; i < labelData.length; i++){
            brandChart.config.data.labels.push(labelData[i]);
        }
        for(var i = 0; i < priceData.length; i++){
            brandChart.config.data.datasets[0].data.push(priceData[i]);
        }

        brandChart.update();    

Мне удалось показать все их на гистограмме, однако результат как таковой:

Это вид сжатия между этими ярлыками, если слишком много категорий. Кроме того, только первый бар имеет цвет и легенды, показанные undefined. Есть идеи, как их решить?

Заранее спасибо!