I'm attempting to change a specific value within a data array for a chart by using chartsJS and Angular. In this case, I want to update the first data point to 0 when the "update data" button is clicked. Unfortunately, despite correctly identifying the elements in the array, I keep encountering the error
ERROR TypeError: Cannot read property '1' of undefinedI've experimented with both the push and pop methods, but they only add or remove different data points – what I really need is to replace them.
Here's the HTML code:
<button (click)="add()">Add Data</button>
And here's how the chart is initialized:
this.NewChart = new Chart('totalJourneys', {
type: 'bar',
data: {
labels: ["Jan", 'Feb', "Mar", "Apr", "May","Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
label: "Number of Items Sold",
data: [9,7,3,5,2,10,15,16,19,3,1,9],
fill: false,
lineTension: 0.2,
backgroundColor: "light-blue",
}]
},
});
This is the function used to update the chart:
public add() {
console.log('added');
this.NewChart.data.datasets.data[1].data[0] = 10;
this.NewChart.update();
}