fix: foreignobject blocking all interactions; fixes #5168

junedchhipa · junedchhipa · commit 51c69c82032e · 2026-02-17T18:23:37.000+05:30
diff --git a/src/modules/Core.js b/src/modules/Core.js
@@ -102,6 +102,22 @@ export default class Core {
 
     this.setSVGDimensions()
 
+    // foreignObject must be added first (at the back in z-order) to prevent blocking interactions
+    gl.dom.elLegendForeign = document.createElementNS(gl.SVGNS, 'foreignObject')
+    Graphics.setAttrs(gl.dom.elLegendForeign, {
+      x: 0,
+      y: 0,
+      width: gl.svgWidth,
+      height: gl.svgHeight,
+    })
+
+    gl.dom.elLegendWrap = document.createElement('div')
+    gl.dom.elLegendWrap.classList.add('apexcharts-legend')
+
+    gl.dom.elWrap.appendChild(gl.dom.elLegendWrap)
+    gl.dom.Paper.node.appendChild(gl.dom.elLegendForeign)
+
+    // Add accessibility elements after foreignObject to maintain proper z-order
     if (cnf.chart.accessibility.enabled) {
       const ariaLabel = this.getAccessibleChartLabel()
 
@@ -110,10 +126,11 @@ export default class Core {
         'aria-label': ariaLabel,
       })
 
-      // Add title element for screen readers
+      // Add title element for screen readers (after foreignObject)
       const titleEl = document.createElementNS(gl.SVGNS, 'title')
       titleEl.textContent = cnf.title.text || 'Chart'
-      gl.dom.Paper.node.insertBefore(titleEl, gl.dom.Paper.node.firstChild)
+      // Insert after foreignObject but before other elements
+      gl.dom.Paper.node.insertBefore(titleEl, gl.dom.elLegendForeign.nextSibling)
 
       // Add desc element when description is provided
       if (cnf.chart.accessibility.description) {
@@ -123,20 +140,6 @@ export default class Core {
       }
     }
 
-    gl.dom.elLegendForeign = document.createElementNS(gl.SVGNS, 'foreignObject')
-    Graphics.setAttrs(gl.dom.elLegendForeign, {
-      x: 0,
-      y: 0,
-      width: gl.svgWidth,
-      height: gl.svgHeight,
-    })
-
-    gl.dom.elLegendWrap = document.createElement('div')
-    gl.dom.elLegendWrap.classList.add('apexcharts-legend')
-
-    gl.dom.elWrap.appendChild(gl.dom.elLegendWrap)
-    gl.dom.Paper.node.appendChild(gl.dom.elLegendForeign)
-
     gl.dom.elGraphical = gl.dom.Paper.group().attr({
       class: 'apexcharts-inner apexcharts-graphical',
     })
