[Chart.js] Listen to Stimulus disconnect event to destroy the chart

symfony · Jan 5, 2025 · 22d1cee · 22d1cee
1 parent 507c89c
commit 22d1cee
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 0 deletions.
diff --git a/src/Chartjs/CHANGELOG.md b/src/Chartjs/CHANGELOG.md
@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## 2.23.0
+
+-   Listen to Stimulus `disconnect` event to destroy the chart #1944
+
 ## 2.18.0
 
 -   Replace `chartjs/auto` import with explicit `Chart.register()` call #1263

diff --git a/src/Chartjs/assets/dist/controller.d.ts b/src/Chartjs/assets/dist/controller.d.ts
@@ -6,6 +6,7 @@ export default class extends Controller {
     };
     private chart;
     connect(): void;
+    disconnect(): void;
     viewValueChanged(): void;
     private dispatchEvent;
 }
diff --git a/src/Chartjs/assets/dist/controller.js b/src/Chartjs/assets/dist/controller.js
@@ -35,6 +35,13 @@ class default_1 extends Controller {
         this.chart = new Chart(canvasContext, payload);
         this.dispatchEvent('connect', { chart: this.chart });
     }
+    disconnect() {
+        this.dispatchEvent('disconnect', { chart: this.chart });
+        if (this.chart) {
+            this.chart.destroy();
+            this.chart = null;
+        }
+    }
     viewValueChanged() {
         if (this.chart) {
             const viewValue = { data: this.viewValue.data, options: this.viewValue.options };

diff --git a/src/Chartjs/assets/src/controller.ts b/src/Chartjs/assets/src/controller.ts
@@ -57,6 +57,15 @@ export default class extends Controller {
         this.dispatchEvent('connect', { chart: this.chart });
     }
 
+    disconnect() {
+        this.dispatchEvent('disconnect', { chart: this.chart });
+
+        if (this.chart) {
+            this.chart.destroy();
+            this.chart = null;
+        }
+    }
+
     /**
      * If the underlying data or options change, let's update the chart!
      */