How to update a Chart.js component in Angular

I have a chart component created with Chart.js, that I am importing into my application, therefore, have no access to the original chart component's code.

Is there a way to update my piechart from my ts file?

The template:

 <form [formGroup]="packagesForm">
   <fieldset>
     <app-singleselect formControlName="pieDropdownOptionsList" name="select" [items]="steps" required="true">                       
     </app-singleselect>
   </fieldset>
 </form>
 <div *ngIf="this.packagesForm.value?.pieDropdownOptionsList === 0; else PieChartTpl">
   <app-horizontal-bar-chart [barData]="barData" [barLabels]="barLabels"></app-horizontal-bar-chart>
 </div>
 <ng-template #PieChartTpl>
   <app-pie-chart [pieData]="pieData" [pieLabels]="pieLabels"></app-pie-chart>
 </ng-template>

.ts

  packagesForm = new FormGroup({
    pieDropdownOptionsList: new FormControl({value: 0, disabled: false})
  });

  steps = [
    {id: 0, name: this.t('piechart_data_option1')},
    {id: 1, name: this.t('piechart_data_option2')},
    {id: 2, name: this.t('piechart_data_option3')},
    {id: 3, name: this.t('piechart_data_option4')}
  ];

  pieLabels: string[];
  pieData: number[];

  barLabels = ['Income: 645.55 €', 'Expense: 90.24 €'];
  barData = [[645.55], [90.24]];


  ngOnInit() {
   this.paketierungsRegelnForm.valueChanges
      .subscribe(v => {
        if (v.pieDropdownOptionsList === 1) {
          this.calculateValuesForOption1();
        }
        else if (v.pieDropdownOptionsList === 2) {
          this.calculateValuesForOption2();
        }
        else if (v.pieDropdownOptionsList === 3){
          this.calculateValuesForOption3();
        }
      });
  }

If I select an option from the dropdown list, I am calculating different values that I would like to display as pieData and pieLabel. But the piechart gets updated only when I switch from the barchart option to the pieChart option.

Can someone please help me?