Edited data in table should change in chart and other components angular

I have a datatable, chart, and Latest value added label.

• Table and chart are displaying time-series data that contains: the value time for the last 30 minutes and its numerical random value from 0 to 999.
• Every 10 seconds new object gets pushed into the array and the oldest one is deleted so only the last 30 minutes are showing all the time.
• Latestvalue label is displaying the latest value added.

I am trying to figure out how to implement editing of the rows in the table so when I edit any of the rows either time or its random value or both I also want to display the change on the chart. Also for some reason the chart is not updating like the table every 10 seconds.

How can I achieve that ? Any help appreciated

Here is working stackblitz link : https://stackblitz.com/edit/angular-znnnsp?file=src%2Fapp%2Fmain%2Ftable%2Ftable.component.ts,src%2Fapp%2Fmain%2Ftable%2Ftable.component.css,src%2Fapp%2Fmain%2Ftable%2Ftable.component.html,src%2Fapp%2Fmain%2Fchart%2Fchart.component.html,angular.json,src%2Fapp%2Fmain%2Fmain.component.css,src%2Fapp%2Fmain%2Fmain.component.ts,src%2Fapp%2Fmain%2Flabel%2Flabel.component.html,src%2Fapp%2Fmain%2Flabel%2Flabel.component.css,package.json