improve legend code; fixes #1907

apexcharts · Apr 16, 2023 · 94e5d75 · 94e5d75
1 parent e58c9f9
commit 94e5d75
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 27 deletions.
diff --git a/src/apexcharts.js b/src/apexcharts.js
@@ -239,7 +239,6 @@ export default class ApexCharts {
     return {
       elGraph,
       xyRatios,
-      elInner: w.globals.dom.elGraphical,
       dimensions: dim
     }
   }
@@ -310,7 +309,6 @@ export default class ApexCharts {
         })
       }
 
-      w.globals.dom.Paper.add(w.globals.dom.elAnnotations)
       me.annotations.drawAxesAnnotations()
 
       if (!w.globals.noData) {

diff --git a/src/modules/Core.js b/src/modules/Core.js
@@ -99,19 +99,29 @@ export default class Core {
 
     this.setSVGDimensions()
 
-    gl.dom.elGraphical = gl.dom.Paper.group().attr({
-      class: 'apexcharts-inner apexcharts-graphical'
+    // append foreignElement (legend's parent)
+    // legend is kept in foreignElement to be included while exporting
+    // removing foreignElement and creating legend through HTML will not render legend in export
+    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.elLegendWrap.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml')
+    gl.dom.elLegendForeign.appendChild(gl.dom.elLegendWrap)
+    gl.dom.Paper.node.appendChild(gl.dom.elLegendForeign)
 
-    gl.dom.elAnnotations = gl.dom.Paper.group().attr({
-      class: 'apexcharts-annotations'
+    // the elGraphical is the parent of all primary visuals
+    gl.dom.elGraphical = gl.dom.Paper.group().attr({
+      class: 'apexcharts-inner apexcharts-graphical'
     })
 
     gl.dom.elDefs = gl.dom.Paper.defs()
 
-    gl.dom.elLegendWrap = document.createElement('div')
-    gl.dom.elLegendWrap.classList.add('apexcharts-legend')
-    gl.dom.elWrap.appendChild(gl.dom.elLegendWrap)
     gl.dom.Paper.add(gl.dom.elGraphical)
     gl.dom.elGraphical.add(gl.dom.elDefs)
   }

diff --git a/src/modules/helpers/Destroy.js b/src/modules/helpers/Destroy.js
@@ -75,8 +75,8 @@ export default class Destroy {
 
     domEls.elWrap = null
     domEls.elGraphical = null
-    domEls.elAnnotations = null
     domEls.elLegendWrap = null
+    domEls.elLegendForeign = null
     domEls.baseEl = null
     domEls.elGridRect = null
     domEls.elGridRectMask = null

diff --git a/src/modules/legend/Helpers.js b/src/modules/legend/Helpers.js
@@ -96,22 +96,7 @@ export default class Helpers {
   appendToForeignObject() {
     const gl = this.w.globals
 
-    gl.dom.elLegendForeign = document.createElementNS(gl.SVGNS, 'foreignObject')
-
-    let elForeign = gl.dom.elLegendForeign
-
-    elForeign.setAttribute('x', 0)
-    elForeign.setAttribute('y', 0)
-    elForeign.setAttribute('width', gl.svgWidth)
-    elForeign.setAttribute('height', gl.svgHeight)
-    gl.dom.elLegendWrap.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml')
-
-    elForeign.appendChild(gl.dom.elLegendWrap)
-    elForeign.appendChild(this.getLegendStyles())
-
-    // gl.dom.elGraphical.node.insertAdjacentElement('afterend', elForeign)
-    // the above line causes issue https://github.com/apexcharts/apexcharts.js/issues/1907
-    gl.dom.Paper.node.insertBefore(elForeign, gl.dom.elGraphical.node)
+    gl.dom.elLegendForeign.appendChild(this.getLegendStyles())
   }
 
   toggleDataSeries(seriesCnt, isHidden) {

diff --git a/src/modules/legend/Legend.js b/src/modules/legend/Legend.js
@@ -284,7 +284,6 @@ class Legend {
     }
 
     w.globals.dom.elWrap.addEventListener('click', me.onLegendClick, true)
-    w.globals.dom.elWrap.appendChild(w.globals.dom.elLegendWrap)
 
     if (
       w.config.legend.onItemHover.highlightDataSeries &&
-Original file line number
+Diff line change
@@ Expand Up / @@ -284,7 +284,6 @@ class Legend { @@
         }
         w.globals.dom.elWrap.addEventListener('click', me.onLegendClick, true)
-        w.globals.dom.elWrap.appendChild(w.globals.dom.elLegendWrap)
         if (
           w.config.legend.onItemHover.highlightDataSeries &&
@@ Expand Down @@