I have a bar chart using chart.js

which is created on init createChart()

it gets default data by this property linchartData = [1, 2, 3];

I want to frequently change the data by listening to a service and change incoming data

getLatest$ = this.globalStateService.getLatestTwo();

  getData() {
   
      this.getLatest$.subscribe(val =>{
        this.linchartData = [];
        for (let i of val) {
          this.linchartData.push(i);
          console.log(this.linchartData)
        }
      })

  }

the data gets changed but the chart does not display the data change
its still display the initial values [1, 2, 3]

how can I tell angular that the linchartData has changed ?

createChart() {
  
    Chart.register(...registerables);

    const myChart = new Chart('myChart', {
      type: 'bar',
      data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green',],
        datasets: [
          {
            label: '# of Votes',
            data: this.linchartData,
            backgroundColor: [
              'rgba(255, 99, 132, 0.2)',
              'rgba(54, 162, 235, 0.2)',
              'rgba(255, 206, 86, 0.2)',
              'rgba(75, 192, 192, 0.2)',
              'rgba(153, 102, 255, 0.2)',
              'rgba(255, 159, 64, 0.2)',
            ],
            borderColor: [
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)',
            ],
            borderWidth: 1,
          },
        ],
      },
      options: {
        scales: {
          y: {
            beginAtZero: true,
          },
        },
      },
    });
  }
}