fix(mainChart): chart.js - Cannot read properties of undefined _clip (reading 'disabled') - fixed by stop() current animations

Uncaught TypeError: Cannot read properties of undefined (reading 'disabled')
    at getDatasetClipArea (helpers.dataset.js:2775:14)

Author: xidedix

src/app/views/charts/charts.component.html

@@ -1,7 +1,7 @@
 <c-row>
   <c-col xs="12">
     <app-docs-callout href="charts">
-      CoreUI Angular wrapper component for Chart.js 4.5, the most popular charting library.
+      CoreUI Angular wrapper component for Chart.js 4.x, the most popular charting library.
       <br>
     </app-docs-callout>
   </c-col>

src/app/views/dashboard/dashboard.component.ts

@@ -1,5 +1,5 @@
 import { NgStyle } from '@angular/common';
-import { Component, DestroyRef, effect, inject, OnInit, Renderer2, signal, WritableSignal, DOCUMENT } from '@angular/core';
+import { Component, DestroyRef, DOCUMENT, effect, inject, OnInit, Renderer2, signal, WritableSignal } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { ChartOptions } from 'chart.js';
 import {
@@ -13,11 +13,9 @@ import {
   ColComponent,
   FormCheckLabelDirective,
   GutterDirective,
-  ProgressBarDirective,
   ProgressComponent,
   RowComponent,
-  TableDirective,
-  TextColorDirective
+  TableDirective
 } from '@coreui/angular';
 import { ChartjsComponent } from '@coreui/angular-chartjs';
 import { IconDirective } from '@coreui/icons-angular';
@@ -41,9 +39,9 @@ interface IUser {
 }
 
 @Component({
-    templateUrl: 'dashboard.component.html',
-    styleUrls: ['dashboard.component.scss'],
-    imports: [WidgetsDropdownComponent, TextColorDirective, CardComponent, CardBodyComponent, RowComponent, ColComponent, ButtonDirective, IconDirective, ReactiveFormsModule, ButtonGroupComponent, FormCheckLabelDirective, ChartjsComponent, NgStyle, CardFooterComponent, GutterDirective, ProgressBarDirective, ProgressComponent, WidgetsBrandComponent, CardHeaderComponent, TableDirective, AvatarComponent]
+  templateUrl: 'dashboard.component.html',
+  styleUrls: ['dashboard.component.scss'],
+  imports: [WidgetsDropdownComponent, CardComponent, CardBodyComponent, RowComponent, ColComponent, ButtonDirective, IconDirective, ReactiveFormsModule, ButtonGroupComponent, FormCheckLabelDirective, ChartjsComponent, NgStyle, CardFooterComponent, GutterDirective, ProgressComponent, WidgetsBrandComponent, CardHeaderComponent, TableDirective, AvatarComponent]
 })
 export class DashboardComponent implements OnInit {
 
@@ -151,6 +149,7 @@ export class DashboardComponent implements OnInit {
   }
 
   initCharts(): void {
+    this.mainChartRef()?.stop();
     this.mainChart = this.#chartsData.mainChart;
   }