Kendo Angular UI Gauges resize themself after update

Question

Im using the RedialGauge from Kendo UI together with angular.

Im loading my data for the gauges dynamically from an api with rxjs every 3 minutes, here is my code:

interval(2e5)
   .pipe(
      startWith(() => forkJoin(
          this.service.getStatistics(),
          this.service.otherCall()
        )
      ),
      switchMap(() => forkJoin(
          this.service.getStatistics(),
          this.service.otherCall()
        )
      ),
      retryWhen((err) => err.pipe(
          take(3)
        )
      )
   ).subscribe(([statistics, others]) => {
      this.statistics = statistics;
      ...
   });

After the init load all is fine and the gauges look like they supposed to

But after the next update the gauges resize them self randomly

Answer 1

That's the result I came up with, it is kinda hacky but it's the only solution that really works.

I basicly reload the component when I want to update the gauges.

public refreshComponent(): void {
   const url = this.router.url;
   this.router.navigateByUrl('/app', {skipLocationChange: true}).then(() => {
      this.router.navigate([url]);
   });
}