I am currently working on an Angular project that involves a chart created with ng2-charts. The data for this chart is entered by the user through a select box for labels and an input field for the data. While I have been able to update the chart with new data entries, any changes made do not actually update the existing values; instead, they simply add them as new ones. You can see examples of this behavior in the screenshots below:
Despite searching various sources online, I have yet to find a solution that addresses my issue. It seems likely that the problem lies in targeting the specific area of the array, but the correct code eludes me. Below is my current code, which allows for adding data but not updating it:
I've included the relevant HTML and TypeScript (TS) files for reference: HTML:
<div class="deposit-container">
// Code for chart container and user-input fields
</div>
TS file excerpt:
// Deposits array containing preset values
deposits: Deposit[] = [
{ value: 'Builders Gift', viewValue: 'Builders Gift' },
// Additional preset values
];
// Data arrays for chart creation
public doughnutChartLabels: any [] = [];
public doughnutChartData: any [] = [];
// Doughnut chart configuration options
public doughnutChartOptions = {
legend: {
display: false,
}
};
getLabel(depositParent) {
// Function for retrieving and pushing selected label data
}
getData(depositParent) {
// Function for retrieving and pushing input data
}
The inability to update or overwrite existing data has led me to experiment with different approaches, such as modifying array indexes directly or utilizing datasets. Despite these attempts, none have proven successful so far.
If anyone has encountered a similar scenario or has suggestions on how to efficiently edit data within an array dynamically, your insights would be greatly appreciated!