fixes #4790; fixes #4791; fix marker bug when null values were present

Author: junedchhipa

src/charts/Line.js

@@ -299,16 +299,17 @@ class Line {
 
     if (w.globals.hasNullValues) {
       // fixes https://github.com/apexcharts/apexcharts.js/issues/3641
-      const firstPoint = this.markers.plotChartMarkers(
-        {
+      const firstPoint = this.markers.plotChartMarkers({
+        pointsPos: {
           x: [w.globals.minX - 100],
           y: [w.globals.minY - 100],
         },
-        i,
-        0,
-        0.1,
-        true
-      )
+        seriesIndex: i,
+        j: 0,
+        pSize: 0.1,
+        alwaysDrawMarker: true,
+        isVirtualPoint: true,
+      })
 
       if (firstPoint !== null) {
         // firstPoint is rendered for cases where there are null values and when dynamic markers are required
@@ -764,11 +765,11 @@ class Line {
         this.elPointsMain.node.classList.add('apexcharts-element-hidden')
       }
 
-      let elPointsWrap = this.markers.plotChartMarkers(
+      let elPointsWrap = this.markers.plotChartMarkers({
         pointsPos,
-        realIndex,
-        j + 1
-      )
+        seriesIndex: realIndex,
+        j: j + 1,
+      })
       if (elPointsWrap !== null) {
         this.elPointsMain.add(elPointsWrap)
       }
@@ -1150,14 +1151,15 @@ class Line {
       if (!(pSize > 0)) {
         pSize = 0
       }
+
       // fixes apexcharts.js#1282, #1252
-      let elPointsWrap = this.markers.plotChartMarkers(
+      let elPointsWrap = this.markers.plotChartMarkers({
         pointsPos,
-        realIndex,
-        j + 1,
+        seriesIndex: realIndex,
+        j: j + 1,
         pSize,
-        true
-      )
+        alwaysDrawMarker: true,
+      })
       if (elPointsWrap !== null) {
         this.elPointsMain.add(elPointsWrap)
       }

src/charts/common/line/Helpers.js

@@ -34,41 +34,35 @@ export default class Helpers {
     let ptX = []
     let ptY = []
 
-    if (j === 0) {
-      let xPT1st =
-        this.lineCtx.categoryAxisCorrection + w.config.markers.offsetX
-      // the first point for line series
-      // we need to check whether it's not a time series, because a time series may
-      // start from the middle of the x axis
-      if (w.globals.isXNumeric) {
-        xPT1st =
-          (w.globals.seriesX[realIndex][0] - w.globals.minX) /
-            this.lineCtx.xRatio +
-          w.config.markers.offsetX
-      }
+    let xPT1st = this.lineCtx.categoryAxisCorrection + w.config.markers.offsetX
+
+    // the first point for line series
+    // we need to check whether it's not a time series, because a time series may
+    // start from the middle of the x axis
+    if (w.globals.isXNumeric) {
+      xPT1st =
+        (w.globals.seriesX[realIndex][0] - w.globals.minX) /
+          this.lineCtx.xRatio +
+        w.config.markers.offsetX
+    }
 
-      // push 2 points for the first data values
+    // push 2 points for the first data values
+    if (j === 0) {
       ptX.push(xPT1st)
       ptY.push(
         Utils.isNumber(series[i][0]) ? prevY + w.config.markers.offsetY : null
       )
-      ptX.push(x + w.config.markers.offsetX)
-      ptY.push(
-        Utils.isNumber(series[i][j + 1]) ? y + w.config.markers.offsetY : null
-      )
-    } else {
-      ptX.push(x + w.config.markers.offsetX)
-      ptY.push(
-        Utils.isNumber(series[i][j + 1]) ? y + w.config.markers.offsetY : null
-      )
     }
 
-    let pointsPos = {
+    ptX.push(x + w.config.markers.offsetX)
+    ptY.push(
+      Utils.isNumber(series[i][j + 1]) ? y + w.config.markers.offsetY : null
+    )
+
+    return {
       x: ptX,
       y: ptY,
     }
-
-    return pointsPos
   }
 
   checkPreviousPaths({ pathFromLine, pathFromArea, realIndex }) {

src/modules/Markers.js

@@ -34,7 +34,14 @@ export default class Markers {
     }
   }
 
-  plotChartMarkers(pointsPos, seriesIndex, j, pSize, alwaysDrawMarker = false) {
+  plotChartMarkers({
+    pointsPos,
+    seriesIndex,
+    j,
+    pSize,
+    alwaysDrawMarker = false,
+    isVirtualPoint = false,
+  }) {
     let w = this.w
 
     let i = seriesIndex
@@ -51,7 +58,11 @@ export default class Markers {
         let markerElement
 
         let dataPointIndex = j
-        const invalidMarker = !Utils.isNumber(p.y[q])
+        let invalidMarker = !Utils.isNumber(p.y[q])
+
+        if (w.globals.series[i][j + 1] !== null && !isVirtualPoint) {
+          invalidMarker = true
+        }
 
         // a small hack as we have 2 points for the first val to connect it
         if (j === 1 && q === 0) dataPointIndex = 0