Different color for each bar in a bar graph in ChartJS and VueJS - vue.js

Question

I want each color of the bar is different depending on the data I have in the database. The problem is when I used the codes below it only change the first bar the rest is not. How can I change each bar? Can somebody help me with my problem? Here's my code below
dynamicColor : function() {
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
return "rgba(" + r + "," + g + "," + b + ", 0.5)";
},
poolColors : function(a) {
var pool = [];
for(var i = 0; i < a; i++) {
pool.push(this.dynamicColor());
}
return pool;
},
retrieveDistributedPerDayByLine : function() {
var self = this;
axios.post(this.urlRoot + this.api + "retrieve_transaction_per_day.php")
.then(response => {
console.log(response);
vm.distributed_per_day = response.data
var ctxChart = self.$refs.myChart.getContext('2d');
var myChart = new Chart(ctxChart, {
type: 'bar',
data: {
labels: vm.distributed_per_day.map(item => item.Day),
datasets: [{
label: 'Total Amount',
data: vm.distributed_per_day.map(item => item.Amount),
backgroundColor: [
this.poolColors(vm.distributed_per_day.length)
],
borderColor: [
this.poolColors(vm.distributed_per_day.length)
],
borderWidth: 1
}]
},
reponsive: true,
options: {
title : {
display : true,
text : "Distrubuted Reports per Day",
fontFamily: "sans-serif",
fontSize: 18
},
legend: {
display: false
},
tooltips: {
enabled: true,
padding: 10
}
}
});
}).catch(e => {
console.log(e)
});
},

Answer 1

the this.poolColors method is returning an array so you are passing an array inside an array hence it is considered as one element ... it should be like this :
backgroundColor: this.poolColors(vm.distributed_per_day.length),
borderColor: this.poolColors(vm.distributed_per_day.length)