Chart.js not showing dynamically populated data

Question

I was having some trouble when trying to dynamically populate bar chart in chart.js. I have two arrays, one for label, one for its price and both of them are already populated with the sorted data from firebase. Here is my code:

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();    

I managed to show all of them in bar chart, however, the result as such:

It is kind of squeeze between each labels if there are too many categories. Also, only the first bar has the color & the legends shown undefined. Any ideas how to solve these?

Thanks in advanced!

Answer 1

ɪꜱꜱᴜᴇ #1 - ꜱᴏʟᴜᴛɪᴏɴ

Add a callback for y-axis ticks, in your chart options :

options: {
   scales: {
      yAxes: [{
         ticks: {
            callback: function(t, i) {
               if (!(i % 2)) return t;
            }
         }
      }]
   },
   ...
}

this will only show every other label on y-axis.

ɪꜱꜱᴜᴇ #2 - ꜱᴏʟᴜᴛɪᴏɴ

This is because, you have only one color in your backgroundColor array. If you want different color for each bar, then you need to populate this array with multiple color values.

^{Edit: as it seems form your updated question, you already kind of got the idea.}

ɪꜱꜱᴜᴇ #3 - ꜱᴏʟᴜᴛɪᴏɴ

Define the label property for your dataset , like so :

datasets: [{
   label: 'Legend Title', //<- define this
   data: [],
   backgroundColor: ["#424242", ]
}]