[Chartjs]-Chart.js not showing dynamically populated data

by

2👍

✅

ɪꜱꜱᴜᴇ #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", ]
}]

Leave a comment