How to update the data in the chart in real time?

Question

JavaScript

How to update the data on the chart when adding, deleting or changing information? Changes in the displayed information on the chart should occur in real time. And preferably without using a child component.
ts:

ngOnInit() {
    this.loadReport()
  }

  private loadReport() {
    this.reportService.fetch(this.report_id).subscribe((data: Report[]) => {
      this.reports = data
    })
  }


  ngAfterViewInit() {
    const incomeConfig: any = {
      label: 'Income',
      backgroundColor: '#009688',
      borderColor: '#00796b'
    }

    const consumptionConfig: any = {
      label: 'Consumption',
      backgroundColor: '#0d47a1',
      borderColor: '#2196f3'
    }

    const dateConfig: any = {
      datasets: [ incomeConfig, consumptionConfig]
    }

    this.reportService.fetch(this.report_id).subscribe((data: Report[]) => {
      incomeConfig.data = data.map(item => item.income)
      consumptionConfig.data = data.map(item => item.consumption)
      dateConfig.labels = data.map(item => item.date)
      const reportCtx = this.reportRef.nativeElement.getContext('2d')

      new Chart(reportCtx, {
        type: 'bar',
        data: dateConfig,
        options: {
          scales: {
            xAxes: [{
                gridLines: {
                    offsetGridLines: true
                }
            }]
          } 
        }
      })
    })
  }

Answer 1

Make the graph a property of the component: Accordingly, the graph data will become available as After making the necessary changes, update the graph: UPD. https://stackblitz.com/edit/angular-h83adp-chartjs...