I have a chart built with react-chartjs-2. The chart displays when I enter the values for data directly in the datasets like this.
datasets: [
{
label: "Active Countries",
backgroundColor: gradientFill,
borderColor: "#2CA8FF",
pointBorderColor: "#FFF",
pointBackgroundColor: "#2CA8FF",
pointBorderWidth: 2,
pointHoverRadius: 4,
pointHoverBorderWidth: 1,
pointRadius: 4,
fill: true,
borderWidth: 1,
data: [80, 99, 86, 96, 123, 85, 100, 75, 88, 90, 123, 155]
}
]
However, I want to replace the value of the data in the datasets with a monthly transaction derived from transactions recorded in my database. The code for my total transaction for each month Jan to Dec ( One for each month) is like this.
const januaryTransactions = transactions.filter(i => {
const date = new Date(i.date);
return date.getMonth() === January && date.getYear() === relevantYear;
}).reduce((prev, curr) => prev + parseFloat(curr.amount), 0)
My question is how do I replace for example the value at in index 0 [80, 99, 86, 96, 123, 85, 100, 75, 88, 90, 123, 155] which is 80 with januaryTransactions .
Any Pointers are mostly appreciated!!