		@@ -242,3 +242,2 @@ import Annotations from './modules/annotations/Annotations'
		xyRatios,
		elInner: w.globals.dom.elGraphical,
		dimensions: dim
		@@ -314,3 +313,2 @@ }

		w.globals.dom.Paper.add(w.globals.dom.elAnnotations)
		me.annotations.drawAxesAnnotations()
		@@ -317,0 +315,0 @@

src/modules/Core.js

		@@ -102,2 +102,19 @@ import Bar from '../charts/Bar'

		// 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)

		// the elGraphical is the parent of all primary visuals
		gl.dom.elGraphical = gl.dom.Paper.group().attr({
		@@ -107,11 +124,4 @@ class: 'apexcharts-inner apexcharts-graphical'

		gl.dom.elAnnotations = gl.dom.Paper.group().attr({
		class: 'apexcharts-annotations'
		})

		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)
		@@ -118,0 +128,0 @@ gl.dom.elGraphical.add(gl.dom.elDefs)

src/modules/dimensions/Helpers.js

		@@ -39,3 +39,3 @@ import Utils from '../../utils/Utils'

		let elLegendWrap = w.globals.dom.baseEl.querySelector('.apexcharts-legend')
		let elLegendWrap = w.globals.dom.elLegendWrap

		@@ -42,0 +42,0 @@ if (

src/modules/dimensions/XAxis.js

		@@ -357,16 +357,4 @@ import Formatters from '../Formatters'
		const padYAxe = (yaxe, i) => {
		if (isCollapsed(i)) return
		if (cnf.yaxis.length > 1 && isCollapsed(i)) return

		// the code below causes issue apexcharts.js#1989
		// after testing with other use-cases, this has no actual value, hence commented
		// if (xtype !== 'datetime') {
		// if (
		// this.dCtx.gridPad.left < lbWidth / 2 - this.dCtx.yAxisWidthLeft &&
		// !gl.rotateXLabels &&
		// !cnf.xaxis.labels.trim
		// ) {
		// this.dCtx.xPadLeft = lbWidth / 2 + 1
		// }
		// }

		rightPad(yaxe)
		@@ -373,0 +361,0 @@ }

src/modules/helpers/Destroy.js

		@@ -78,4 +78,4 @@ export default class Destroy {
		domEls.elGraphical = null
		domEls.elAnnotations = null
		domEls.elLegendWrap = null
		domEls.elLegendForeign = null
		domEls.baseEl = null
		@@ -82,0 +82,0 @@ domEls.elGridRect = null

src/modules/legend/Helpers.js

		@@ -10,2 +10,72 @@ import Graphics from '../Graphics'

		getLegendStyles() {
		let stylesheet = document.createElement('style')
		stylesheet.setAttribute('type', 'text/css')

		const text = `

		.apexcharts-legend {
		display: flex;
		overflow: auto;
		padding: 0 10px;
		}
		.apexcharts-legend.apx-legend-position-bottom, .apexcharts-legend.apx-legend-position-top {
		flex-wrap: wrap
		}
		.apexcharts-legend.apx-legend-position-right, .apexcharts-legend.apx-legend-position-left {
		flex-direction: column;
		bottom: 0;
		}
		.apexcharts-legend.apx-legend-position-bottom.apexcharts-align-left, .apexcharts-legend.apx-legend-position-top.apexcharts-align-left, .apexcharts-legend.apx-legend-position-right, .apexcharts-legend.apx-legend-position-left {
		justify-content: flex-start;
		}
		.apexcharts-legend.apx-legend-position-bottom.apexcharts-align-center, .apexcharts-legend.apx-legend-position-top.apexcharts-align-center {
		justify-content: center;
		}
		.apexcharts-legend.apx-legend-position-bottom.apexcharts-align-right, .apexcharts-legend.apx-legend-position-top.apexcharts-align-right {
		justify-content: flex-end;
		}
		.apexcharts-legend-series {
		cursor: pointer;
		line-height: normal;
		}
		.apexcharts-legend.apx-legend-position-bottom .apexcharts-legend-series, .apexcharts-legend.apx-legend-position-top .apexcharts-legend-series{
		display: flex;
		align-items: center;
		}
		.apexcharts-legend-text {
		position: relative;
		font-size: 14px;
		}
		.apexcharts-legend-text , .apexcharts-legend-marker {
		pointer-events: none;
		}
		.apexcharts-legend-marker {
		position: relative;
		display: inline-block;
		cursor: pointer;
		margin-right: 3px;
		border-style: solid;
		}

		.apexcharts-legend.apexcharts-align-right .apexcharts-legend-series, .apexcharts-legend.apexcharts-align-left .apexcharts-legend-series{
		display: inline-block;
		}
		.apexcharts-legend-series.apexcharts-no-click {
		cursor: auto;
		}
		.apexcharts-legend .apexcharts-hidden-zero-series, .apexcharts-legend .apexcharts-hidden-null-series {
		display: none !important;
		}
		.apexcharts-inactive-legend {
		opacity: 0.45;
		}`

		let rules = document.createTextNode(text)

		stylesheet.appendChild(rules)

		return stylesheet
		}

		getLegendBBox() {
		@@ -27,2 +97,8 @@ const w = this.w

		appendToForeignObject() {
		const gl = this.w.globals

		gl.dom.elLegendForeign.appendChild(this.getLegendStyles())
		}

		toggleDataSeries(seriesCnt, isHidden) {
		@@ -29,0 +105,0 @@ const w = this.w

src/modules/legend/Legend.js

		@@ -48,2 +48,11 @@ import CoreUtils from '../CoreUtils'

		if (!Utils.isIE11()) {
		this.legendHelpers.appendToForeignObject()
		} else {
		// IE11 doesn't supports foreignObject, hence append it to <head>
		document
		.getElementsByTagName('head')[0]
		.appendChild(this.legendHelpers.getLegendStyles())
		}

		if (cnf.legend.position === 'bottom' \|\| cnf.legend.position === 'top') {
		@@ -279,3 +288,2 @@ this.legendAlignHorizontal()
		w.globals.dom.elWrap.addEventListener('click', me.onLegendClick, true)
		w.globals.dom.elWrap.appendChild(w.globals.dom.elLegendWrap)

		@@ -282,0 +290,0 @@ if (

dist/apexcharts.amd.js