From 659aefb16ee1fffa7f3519776761d0aba90af477 Mon Sep 17 00:00:00 2001
From: wakqasahmed <wakqasahmed@gmail.com>
Date: Fri, 4 Sep 2026 23:06:49 +0200
Subject: [PATCH 1/2] Redraw chart when its modal or accordion pane is shown

The chart is built at construction time via new Chart(this.data.get("parent"), ...),
which sizes itself from the container's current width. Inside a modal or accordion
pane that's still display:none at that point, it gets built at zero width, and the
existing shown.bs.tab listener never covers this case since neither container is a
tab.

Wires shown.bs.modal / shown.bs.collapse on the closest .modal / .collapse ancestor,
same pattern as the tab listener, calling the existing debounced draw().

Fixes #3089
---
 resources/js/controllers/chart_controller.js | 21 ++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/resources/js/controllers/chart_controller.js b/resources/js/controllers/chart_controller.js
index 22e85d3f3..c12ed9d1c 100644
--- a/resources/js/controllers/chart_controller.js
+++ b/resources/js/controllers/chart_controller.js
@@ -36,6 +36,19 @@ export default class extends ApplicationController {
         document.querySelectorAll('a[data-bs-toggle="tab"]').forEach(tabElm => {
             tabElm.addEventListener("shown.bs.tab", this.drawEvent);
         });
+
+        // A chart built while its modal or accordion pane is still hidden gets
+        // drawn at zero size, so only its point markers ever show up. Redraw it
+        // once the container is actually shown.
+        this.modal = this.element.closest(".modal");
+        if (this.modal !== null) {
+            this.modal.addEventListener("shown.bs.modal", this.drawEvent);
+        }
+
+        this.collapse = this.element.closest(".collapse");
+        if (this.collapse !== null) {
+            this.collapse.addEventListener("shown.bs.collapse", this.drawEvent);
+        }
     }
 
     /**
@@ -56,5 +69,13 @@ export default class extends ApplicationController {
         document.querySelectorAll('a[data-bs-toggle="tab"]').forEach(tabElm => {
             tabElm.removeEventListener("shown.bs.tab", this.drawEvent);
         });
+
+        if (this.modal !== null) {
+            this.modal.removeEventListener("shown.bs.modal", this.drawEvent);
+        }
+
+        if (this.collapse !== null) {
+            this.collapse.removeEventListener("shown.bs.collapse", this.drawEvent);
+        }
     }
 }

From c35c0a6f0d3529338b3f595f2c34d91656e091b6 Mon Sep 17 00:00:00 2001
From: wakqasahmed <4486133+wakqasahmed@users.noreply.github.com>
Date: Fri, 4 Sep 2026 21:07:58 +0000
Subject: [PATCH 2/2] Fixed code style

---
 resources/js/controllers/chart_controller.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/resources/js/controllers/chart_controller.js b/resources/js/controllers/chart_controller.js
index c12ed9d1c..85226770d 100644
--- a/resources/js/controllers/chart_controller.js
+++ b/resources/js/controllers/chart_controller.js
@@ -75,7 +75,10 @@ export default class extends ApplicationController {
         }
 
         if (this.collapse !== null) {
-            this.collapse.removeEventListener("shown.bs.collapse", this.drawEvent);
+            this.collapse.removeEventListener(
+                "shown.bs.collapse",
+                this.drawEvent
+            );
         }
     }
 }