fix #1778; performance improvements in charts with null data in a lin…

…e chart

src/assets/apexcharts.css

@@ -616,18 +616,17 @@ rect.legend-mouseover-inactive,
 
 .apexcharts-annotation-rect,
 .apexcharts-area-series .apexcharts-area,
-.apexcharts-area-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events,
 .apexcharts-gridline,
 .apexcharts-line,
-.apexcharts-line-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events,
 .apexcharts-point-annotation-label,
 .apexcharts-radar-series path:not(.apexcharts-marker),
 .apexcharts-radar-series polygon,
 .apexcharts-toolbar svg,
 .apexcharts-tooltip .apexcharts-marker,
 .apexcharts-xaxis-annotation-label,
 .apexcharts-yaxis-annotation-label,
-.apexcharts-zoom-rect {
+.apexcharts-zoom-rect,
+.no-pointer-events {
   pointer-events: none
 }
 

src/charts/Line.js

@@ -703,6 +703,7 @@ class Line {
 
       if (
         this.appendPathFrom &&
+        !w.globals.hasNullValues &&
         !(curve === 'monotoneCubic' && type === 'rangeArea')
       ) {
         pathFromLine += graphics.line(x, this.areaBottomY)
@@ -953,7 +954,10 @@ class Line {
               areaPath = graphics.move(pX, pY)
 
               // Check for single isolated point
-              if (series[i][j + 1] === null || typeof series[i][j + 1] === 'undefined') {
+              if (
+                series[i][j + 1] === null ||
+                typeof series[i][j + 1] === 'undefined'
+              ) {
                 linePaths.push(linePath)
                 areaPaths.push(areaPath)
                 // Stay in pathState = 0;
@@ -1042,7 +1046,10 @@ class Line {
               areaPath = graphics.move(pX, pY)
 
               // Check for single isolated point
-              if (series[i][j + 1] === null || typeof series[i][j + 1] === 'undefined') {
+              if (
+                series[i][j + 1] === null ||
+                typeof series[i][j + 1] === 'undefined'
+              ) {
                 linePaths.push(linePath)
                 areaPaths.push(areaPath)
                 // Stay in pathState = 0

src/modules/Markers.js

@@ -3,7 +3,7 @@ import Graphics from './Graphics'
 import Utils from '../utils/Utils'
 
 /**
- * ApexCharts Markers Class for drawing points on y values in axes charts.
+ * ApexCharts Markers Class for drawing markers on y values in axes charts.
  *
  * @module Markers
  **/
@@ -39,63 +39,44 @@ export default class Markers {
 
     let i = seriesIndex
     let p = pointsPos
-    let elPointsWrap = null
+    let elMarkersWrap = null
 
     let graphics = new Graphics(this.ctx)
 
-    let point
-
     const hasDiscreteMarkers =
       w.config.markers.discrete && w.config.markers.discrete.length
 
-    if (
-      w.globals.markers.size[seriesIndex] > 0 ||
-      alwaysDrawMarker ||
-      hasDiscreteMarkers
-    ) {
-      elPointsWrap = graphics.group({
-        class:
-          alwaysDrawMarker || hasDiscreteMarkers
-            ? ''
-            : 'apexcharts-series-markers',
-      })
-
-      elPointsWrap.attr(
-        'clip-path',
-        `url(#gridRectMarkerMask${w.globals.cuid})`
-      )
-    }
-
     if (Array.isArray(p.x)) {
       for (let q = 0; q < p.x.length; q++) {
+        let markerElement
+
         let dataPointIndex = j
+        const invalidMarker = !Utils.isNumber(p.y[q])
 
         // a small hack as we have 2 points for the first val to connect it
         if (j === 1 && q === 0) dataPointIndex = 0
         if (j === 1 && q === 1) dataPointIndex = 1
 
-        let PointClasses = 'apexcharts-marker'
+        let markerClasses = 'apexcharts-marker'
         if (
           (w.config.chart.type === 'line' || w.config.chart.type === 'area') &&
           !w.globals.comboCharts &&
           !w.config.tooltip.intersect
         ) {
-          PointClasses += ' no-pointer-events'
+          markerClasses += ' no-pointer-events'
         }
 
         const shouldMarkerDraw = Array.isArray(w.config.markers.size)
           ? w.globals.markers.size[seriesIndex] > 0
           : w.config.markers.size > 0
 
         if (shouldMarkerDraw || alwaysDrawMarker || hasDiscreteMarkers) {
-          if (Utils.isNumber(p.y[q])) {
-            PointClasses += ` w${Utils.randomId()}`
-          } else {
-            PointClasses = 'apexcharts-nullpoint'
+          if (!invalidMarker) {
+            markerClasses += ` w${Utils.randomId()}`
           }
 
           let opts = this.getMarkerConfig({
-            cssClass: PointClasses,
+            cssClass: markerClasses,
             seriesIndex,
             dataPointIndex,
           })
@@ -125,19 +106,42 @@ export default class Markers {
             opts.pSize = 0
           }
 
-          point = graphics.drawMarker(p.x[q], p.y[q], opts)
-
-          point.attr('rel', dataPointIndex)
-          point.attr('j', dataPointIndex)
-          point.attr('index', seriesIndex)
-          point.node.setAttribute('default-marker-size', opts.pSize)
-
-          const filters = new Filters(this.ctx)
-          filters.setSelectionFilter(point, seriesIndex, dataPointIndex)
-          this.addEvents(point)
-
-          if (elPointsWrap) {
-            elPointsWrap.add(point)
+          if (!invalidMarker) {
+            if (
+              w.globals.markers.size[seriesIndex] > 0 ||
+              alwaysDrawMarker ||
+              hasDiscreteMarkers
+            ) {
+              elMarkersWrap = graphics.group({
+                class:
+                  alwaysDrawMarker || hasDiscreteMarkers
+                    ? ''
+                    : 'apexcharts-series-markers',
+              })
+
+              elMarkersWrap.attr(
+                'clip-path',
+                `url(#gridRectMarkerMask${w.globals.cuid})`
+              )
+            }
+            markerElement = graphics.drawMarker(p.x[q], p.y[q], opts)
+
+            markerElement.attr('rel', dataPointIndex)
+            markerElement.attr('j', dataPointIndex)
+            markerElement.attr('index', seriesIndex)
+            markerElement.node.setAttribute('default-marker-size', opts.pSize)
+
+            const filters = new Filters(this.ctx)
+            filters.setSelectionFilter(
+              markerElement,
+              seriesIndex,
+              dataPointIndex
+            )
+            this.addEvents(markerElement)
+
+            if (elMarkersWrap) {
+              elMarkersWrap.add(markerElement)
+            }
           }
         } else {
           // dynamic array creation - multidimensional
@@ -149,7 +153,7 @@ export default class Markers {
       }
     }
 
-    return elPointsWrap
+    return elMarkersWrap
   }
 
   getMarkerConfig({