Merge main

dist/apexcharts.css

@@ -630,7 +630,7 @@ rect.legend-mouseover-inactive,
 .apexcharts-line,
 .apexcharts-line-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events,
 .apexcharts-point-annotation-label,
-.apexcharts-radar-series path,
+.apexcharts-radar-series path:not(.apexcharts-marker),
 .apexcharts-radar-series polygon,
 .apexcharts-toolbar svg,
 .apexcharts-tooltip .apexcharts-marker,
@@ -640,7 +640,7 @@ rect.legend-mouseover-inactive,
   pointer-events: none
 }
 
-.apexcharts-marker {
+.apexcharts-tooltip-active .apexcharts-marker {
   transition: .15s ease all
 }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "apexcharts",
-  "version": "3.50.0",
+  "version": "3.51.0",
   "description": "A JavaScript Chart Library",
   "repository": {
     "type": "git",

src/charts/common/bar/DataLabels.js

@@ -86,7 +86,7 @@ export default class BarDataLabels {
       height: 0,
     }
     if (w.config.dataLabels.enabled) {
-      const yLabel = this.barCtx.series[i][j]
+      const yLabel = w.globals.series[i][j]
 
       textRects = graphics.getTextRects(
         w.globals.yLabelFormatters[0](yLabel),
@@ -127,15 +127,15 @@ export default class BarDataLabels {
       cy: dataLabelsPos.bcy,
       cx: dataLabelsPos.bcx,
       j,
-      val: series[i][j],
+      val: w.globals.series[i][j],
       barHeight,
       barWidth,
     })
 
     dataLabels = this.drawCalculatedDataLabels({
       x: dataLabelsPos.dataLabelsX,
       y: dataLabelsPos.dataLabelsY,
-      val: this.barCtx.isRangeBar ? [y1, y2] : series[i][j],
+      val: this.barCtx.isRangeBar ? [y1, y2] : w.globals.series[i][j],
       i: realIndex,
       j,
       barWidth,
@@ -242,7 +242,7 @@ export default class BarDataLabels {
         dataLabelsX + textRects.height / 2 - strokeWidth / 2 - offsetDLX
     }
 
-    let valIsNegative = this.barCtx.series[i][j] < 0
+    let valIsNegative = w.globals.series[i][j] < 0
 
     let newY = y
     if (this.barCtx.isReversed) {
@@ -332,11 +332,11 @@ export default class BarDataLabels {
 
       totalDataLabelsX =
         totalDataLabelsBcx +
-        (w.globals.isXNumeric 
-          ? -barWidth * w.globals.barGroups.length / 2
-          : w.globals.barGroups.length * barWidth / 2
-            - (w.globals.barGroups.length - 1) * barWidth
-            - xDivision) +
+        (w.globals.isXNumeric
+          ? (-barWidth * w.globals.barGroups.length) / 2
+          : (w.globals.barGroups.length * barWidth) / 2 -
+            (w.globals.barGroups.length - 1) * barWidth -
+            xDivision) +
         barTotalDataLabelsConfig.offsetX
     }
 
@@ -396,7 +396,7 @@ export default class BarDataLabels {
     let totalDataLabelsY
     let totalDataLabelsAnchor = 'start'
 
-    let valIsNegative = this.barCtx.series[i][j] < 0
+    let valIsNegative = w.globals.series[i][j] < 0
 
     let newX = x
     if (this.barCtx.isReversed) {

src/charts/common/bar/Helpers.js

@@ -199,7 +199,7 @@ export default class Helpers {
       })
     }
 
-    if (w.config.series[i].data[j] && w.config.series[i].data[j].fillColor) {
+    if (w.config.series[i].data[j]?.fillColor) {
       fillColor = w.config.series[i].data[j].fillColor
     }
 
@@ -214,7 +214,7 @@ export default class Helpers {
       fillType: w.config.series[i].data[j]?.fill?.type
         ? w.config.series[i].data[j]?.fill.type
         : Array.isArray(w.config.fill.type)
-        ? w.config.fill.type[i]
+        ? w.config.fill.type[realIndex]
         : w.config.fill.type,
     })
 

src/modules/Core.js

@@ -522,7 +522,7 @@ export default class Core {
       !w.config.legend.floating
     ) {
       legendHeight =
-        new Legend(this.ctx).legendHelpers.getLegendBBox().clwh + 10
+        new Legend(this.ctx).legendHelpers.getLegendDimensions().clwh + 10
     }
 
     let el = w.globals.dom.baseEl.querySelector(

src/modules/Range.js

@@ -36,37 +36,6 @@ class Range {
     if (endingSeriesIndex === null) {
       endingSeriesIndex = startingSeriesIndex + 1
     }
-
-    let firstXIndex = 0
-    let lastXIndex = 0
-    let  seriesX = undefined
-    if (gl.seriesX.length >= endingSeriesIndex) {
-      seriesX = [...new Set([].concat(...gl.seriesX.slice(startingSeriesIndex, endingSeriesIndex)))]
-      firstXIndex = 0
-      lastXIndex = seriesX.length - 1
-      // Eventually brushSource will be set if the current chart is a target.
-      // That is, after the appropriate event causes us to update.
-      let brush = gl.brushSource?.w.config.chart.brush
-      if ((cnf.chart.zoom.enabled && cnf.chart.zoom.autoScaleYaxis)
-              || (brush?.enabled && brush?.autoScaleYaxis)
-      ) {
-        // Scale the Y axis to the min..max within the zoomed X axis domain.
-        if (cnf.xaxis.min) {
-          for (
-            firstXIndex = 0;
-            firstXIndex < lastXIndex && seriesX[firstXIndex] < cnf.xaxis.min;
-            firstXIndex++
-          ) {}
-        }
-        if (cnf.xaxis.max) {
-          for (
-            ;
-            lastXIndex > firstXIndex && seriesX[lastXIndex] > cnf.xaxis.max;
-            lastXIndex--
-          ) {}
-        }
-      }
-    }
 
     let series = gl.series
     let seriesMin = series
@@ -82,6 +51,17 @@ class Range {
       seriesMin = gl.seriesRangeStart
       seriesMax = gl.seriesRangeEnd
     }
+    let autoScaleYaxis = false
+    if (gl.seriesX.length >= endingSeriesIndex) {
+      // Eventually brushSource will be set if the current chart is a target.
+      // That is, after the appropriate event causes us to update.
+      let brush = gl.brushSource?.w.config.chart.brush
+      if ((cnf.chart.zoom.enabled && cnf.chart.zoom.autoScaleYaxis)
+              || (brush?.enabled && brush?.autoScaleYaxis)
+      ) {
+        autoScaleYaxis = true
+      }
+    }
 
     for (let i = startingSeriesIndex; i < endingSeriesIndex; i++) {
       gl.dataPoints = Math.max(gl.dataPoints, series[i].length)
@@ -102,9 +82,24 @@ class Range {
         // the condition cnf.xaxis.type !== 'datetime' fixes #3897 and #3905
         gl.dataPoints = Math.max(gl.dataPoints, gl.labels.length)
       }
-      if (!seriesX) {
-        firstXIndex = 0
-        lastXIndex = gl.series[i].length
+      let firstXIndex = 0
+      let lastXIndex = series[i].length - 1
+      if (autoScaleYaxis) {
+        // Scale the Y axis to the min..max within the possibly zoomed X axis domain.
+        if (cnf.xaxis.min) {
+          for (
+            ;
+            firstXIndex < lastXIndex && gl.seriesX[i][firstXIndex] < cnf.xaxis.min;
+            firstXIndex++
+          ) {}
+        }
+        if (cnf.xaxis.max) {
+          for (
+            ;
+            lastXIndex > firstXIndex && gl.seriesX[i][lastXIndex] > cnf.xaxis.max;
+            lastXIndex--
+          ) {}
+        }
       }
       for (let j = firstXIndex; j <= lastXIndex && j < gl.series[i].length; j++) {
         let val = series[i][j]

src/modules/ZoomPanSelection.js

@@ -559,16 +559,14 @@ export default class ZoomPanSelection extends Toolbar {
 
     w.config.yaxis.forEach((yaxe, index) => {
       // We can use the index of any series referenced by the Yaxis
-      // because they will all return the same value.
-      if (w.globals.seriesYAxisMap[index].length > 0) {
-        let seriesIndex = w.globals.seriesYAxisMap[index][0]
-        yHighestValue.push(
-          w.globals.yAxisScale[index].niceMax - xyRatios.yRatio[seriesIndex] * me.startY
-        )
-        yLowestValue.push(
-          w.globals.yAxisScale[index].niceMax - xyRatios.yRatio[seriesIndex] * me.endY
-        )
-      }
+      // because they will all return the same value, so we choose the first.
+      let seriesIndex = w.globals.seriesYAxisMap[index][0]
+      yHighestValue.push(
+        w.globals.yAxisScale[index].niceMax - xyRatios.yRatio[seriesIndex] * me.startY
+      )
+      yLowestValue.push(
+        w.globals.yAxisScale[index].niceMax - xyRatios.yRatio[seriesIndex] * me.endY
+      )
     })
 
     if (

src/modules/legend/Helpers.js

@@ -77,14 +77,12 @@ export default class Helpers {
     return stylesheet
   }
 
-  getLegendBBox() {
+  getLegendDimensions() {
     const w = this.w
     let currLegendsWrap =
       w.globals.dom.baseEl.querySelector('.apexcharts-legend')
-    let currLegendsWrapRect = currLegendsWrap.getBoundingClientRect()
-
-    let currLegendsWrapWidth = currLegendsWrapRect.width
-    let currLegendsWrapHeight = currLegendsWrapRect.height
+    let currLegendsWrapWidth = currLegendsWrap.offsetWidth
+    let currLegendsWrapHeight = currLegendsWrap.offsetHeight
 
     return {
       clwh: currLegendsWrapHeight,

src/modules/legend/Legend.js

@@ -120,10 +120,9 @@ class Legend {
       const SVGMarker = SVG(elMarker).size('100%', '100%')
       const marker = new Graphics(this.ctx).drawMarker(0, 0, {
         ...markerConfig,
-        pointFillColor: Array.isArray(w.config.legend.markers.fillColors)
+        pointFillColor: Array.isArray(fillcolor)
           ? fillcolor[i]
           : markerConfig.pointFillColor,
-
         shape,
       })
 
@@ -374,7 +373,7 @@ class Legend {
 
     elLegendWrap.style.right = 0
 
-    let lRect = this.legendHelpers.getLegendBBox()
+    let lRect = this.legendHelpers.getLegendDimensions()
 
     let dimensions = new Dimensions(this.ctx)
     let titleRect = dimensions.dimHelpers.getTitleSubtitleCoords('title')
@@ -401,7 +400,7 @@ class Legend {
   legendAlignVertical() {
     let w = this.w
 
-    let lRect = this.legendHelpers.getLegendBBox()
+    let lRect = this.legendHelpers.getLegendDimensions()
 
     let offsetY = 20
     let offsetX = 0