apexcharts - npm Package Compare versions

Comparing version 3.42.0 to 3.43.0

package.json

 {
   "name": "apexcharts",
-  "version": "3.42.0",
+  "version": "3.43.0",
   "description": "A JavaScript Chart Library",
@@ -5,0 +5,0 @@ "repository": {

README.md

@@ -157,8 +157,8 @@ <p align="center"><img src="https://apexcharts.com/media/apexcharts-logo.png"></p>
 
-## Need Advanced Data Grid for your next project? 
-We partnered with Infragistics, creators of the fastest data grids on the planet! Ignite UI Grids can handle unlimited rows and columns of data while providing access to custom templates and real-time data updates. 
+## Need Advanced Data Grid for your next project?
+We partnered with Infragistics, creators of the fastest data grids on the planet! Ignite UI Grids can handle unlimited rows and columns of data while providing access to custom templates and real-time data updates.
 
 <p align="center"><a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid" target="_blank"><img src="https://apexcharts.com/media/infragistics-data-grid.png" /></a></p>
 
-Featuring an intuitive API for easy theming and branding, you can quickly bind to data with minimal hand-on coding. The grid is available in most of your favorite frameworks:  
+Featuring an intuitive API for easy theming and branding, you can quickly bind to data with minimal hand-on coding. The grid is available in most of your favorite frameworks:
 
@@ -205,2 +205,4 @@ <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid">Angular Data Grid</a> | <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-react/react/components/grids">React Data Grid</a> | <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/data-grid">Blazor Data Grid</a> | <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/data-grid">Web Components DataGrid</a> | <a target="_blank" href="https://www.igniteui.com/grid/overview">jQuery Data Grid </a>
 
+More details in [Contributing Guidelines](CONTRIBUTING.md).
+
 #### Minifying the src
@@ -207,0 +209,0 @@

src/apexcharts.js

@@ -563,2 +563,4 @@ import Annotations from './modules/annotations/Annotations'
     const chartId = Utils.escapeString(id)
+    if (!Apex._chartInstances) return undefined
+
     const c = Apex._chartInstances.filter((ch) => ch.id === chartId)[0]
@@ -631,2 +633,6 @@ return c && c.chart
 
+  isSeriesHidden(seriesName) {
+    this.series.isSeriesHidden(seriesName);
+  }
+
   resetSeries(shouldUpdateChart = true, shouldResetZoom = true) {
@@ -633,0 +639,0 @@ this.series.resetSeries(shouldUpdateChart, shouldResetZoom)

src/charts/Bar.js

@@ -94,3 +94,3 @@ import BarDataLabels from './common/bar/DataLabels'
         console.warn(
-          'WARNING: DataLabels are enabled but there are too many to display. This may cause performance issue when rendering.'
+          'WARNING: DataLabels are enabled but there are too many to display. This may cause performance issue when rendering - ApexCharts'
         )
@@ -166,7 +166,7 @@ }
       let elGoalsMarkers = graphics.group({
-        class: 'apexcharts-bar-goals-markers'        
+        class: 'apexcharts-bar-goals-markers',
       })
 
       let elBarShadows = graphics.group({
-        class: 'apexcharts-bar-shadows'        
+        class: 'apexcharts-bar-shadows',
       })
@@ -537,14 +537,5 @@
       if (w.config.plotOptions.bar.hideZeroBarsWhenGrouped) {
-        let nonZeroColumns = 0
-        let zeroEncounters = 0
-        w.globals.seriesPercent.forEach((_s, _si) => {
-          if (_s[j]) {
-            nonZeroColumns++
-          }
+        const { nonZeroColumns, zeroEncounters } =
+          this.barHelpers.getZeroValueEncounters({ i, j })
 
-          if (_si < i && _s[j] === 0) {
-            zeroEncounters++
-          }
-        })
-
         if (nonZeroColumns > 0) {
@@ -551,0 +542,0 @@ barWidth = (this.seriesLen * barWidth) / nonZeroColumns

src/charts/common/bar/DataLabels.js

@@ -209,2 +209,7 @@ import Graphics from '../../../modules/Graphics'
 
+    const { zeroEncounters } = this.barCtx.barHelpers.getZeroValueEncounters({
+      i,
+      j,
+    })
+
     bcx =
@@ -223,2 +228,8 @@ bcx - strokeWidth / 2 + (groupIndex !== -1 ? groupIndex * barWidth : 0)
       }
+      if (
+        zeroEncounters > 0 &&
+        w.config.plotOptions.bar.hideZeroBarsWhenGrouped
+      ) {
+        dataLabelsX = dataLabelsX - barWidth * zeroEncounters
+      }
     }
@@ -244,3 +255,3 @@
           if (valIsNegative) {
-            dataLabelsY = newY + barHeight / 2 + offY
+            dataLabelsY = newY - barHeight / 2 + offY
           } else {
@@ -260,3 +271,3 @@ dataLabelsY = newY + barHeight / 2 - offY
           if (valIsNegative) {
-            dataLabelsY = newY + barHeight + offY
+            dataLabelsY = newY - barHeight + offY
           } else {
@@ -263,0 +274,0 @@ dataLabelsY = newY + barHeight - offY

src/charts/common/bar/Helpers.js

@@ -672,2 +672,23 @@ import Fill from '../../../modules/Fill'
   }
+
+  getZeroValueEncounters({ i, j }) {
+    const w = this.w
+
+    let nonZeroColumns = 0
+    let zeroEncounters = 0
+    w.globals.seriesPercent.forEach((_s, _si) => {
+      if (_s[j]) {
+        nonZeroColumns++
+      }
+
+      if (_si < i && _s[j] === 0) {
+        zeroEncounters++
+      }
+    })
+
+    return {
+      nonZeroColumns,
+      zeroEncounters,
+    }
+  }
 }

src/charts/HeatMap.js

@@ -35,3 +35,3 @@ import Animations from '../modules/Animations'
     let ret = graphics.group({
-      class: 'apexcharts-heatmap'
+      class: 'apexcharts-heatmap',
     })
@@ -66,3 +66,3 @@
         rel: i + 1,
-        'data:realIndex': i
+        'data:realIndex': i,
       })
@@ -107,3 +107,3 @@ this.ctx.series.addCollapsedClassToSeries(elSeries, i)
               ? w.config.fill.image.height
-              : yDivision
+              : yDivision,
           })
@@ -117,3 +117,3 @@ }
           cx: x1,
-          cy: y1
+          cy: y1,
         })
@@ -134,3 +134,3 @@
             : w.globals.stroke.colors[0],
-          color
+          color,
         })
@@ -176,3 +176,3 @@
           dataPointIndex: j,
-          w
+          w,
         })
@@ -187,3 +187,3 @@
           colorProps: heatColorProps,
-          series: heatSeries
+          series: heatSeries,
         })
@@ -210,4 +210,2 @@ if (dataLabels !== null) {
     w.globals.yAxisScale[0].result = yAxisScale
-    let divisor = w.globals.gridHeight / w.globals.series.length
-    w.config.yaxis[0].labels.offsetY = -(divisor / 2)
 
@@ -225,3 +223,3 @@ return ret
         width: 0,
-        height: 0
+        height: 0,
       },
@@ -232,3 +230,3 @@ {
         width,
-        height
+        height,
       },
@@ -244,9 +242,9 @@ speed,
     el.attr({
-      fill: colorFrom
+      fill: colorFrom,
     })
       .animate(speed)
       .attr({
-        fill: colorTo
+        fill: colorTo,
       })
   }
 }

src/charts/Line.js

@@ -86,6 +86,3 @@ import CoreUtils from '../modules/CoreUtils'
 
-      let pX = x
-      let pY
-      let pY2
-      let prevX = pX
+      let prevX = x
       let prevY = this.zeroY
@@ -103,4 +100,8 @@ let prevY2 = this.zeroY
       prevY = firstPrevY.prevY
-      yArrj.push(prevY)
-      pY = prevY
+      if (w.config.stroke.curve === 'smooth' && series[i][0] === null) {
+        // we have to discard the y position if 1st dataPoint is null as it causes issues with monotoneCubic path creation
+        yArrj.push(null)
+      } else {
+        yArrj.push(prevY)
+      }
 
@@ -118,3 +119,2 @@ // y2 are needed for range-area charts
         prevY2 = firstPrevY2.prevY
-        pY2 = prevY2
         y2Arrj.push(prevY2)
@@ -140,4 +140,2 @@ }
         y,
-        pX,
-        pY,
         pathsFrom,
@@ -171,3 +169,2 @@ linePaths,
           series: seriesRangeEnd,
-          pY: pY2,
           pathsFrom: pathsFrom2,
@@ -472,4 +469,2 @@ iterations: seriesRangeEnd[i].length - 1,
     y,
-    pX,
-    pY,
     pathsFrom,
@@ -502,2 +497,10 @@ linePaths,
 
+    const getY = (_y, lineYPos) => {
+      return (
+        lineYPos -
+        _y / yRatio[this.yaxisIndex] +
+        (this.isReversed ? _y / yRatio[this.yaxisIndex] : 0) * 2
+      )
+    }
+
     let y2 = y
@@ -546,20 +549,8 @@ for (let j = 0; j < iterations; j++) {
       if (isNull) {
-        y =
-          lineYPosition -
-          minY / yRatio[this.yaxisIndex] +
-          (this.isReversed ? minY / yRatio[this.yaxisIndex] : 0) * 2
+        y = getY(minY, lineYPosition)
       } else {
-        y =
-          lineYPosition -
-          series[i][j + 1] / yRatio[this.yaxisIndex] +
-          (this.isReversed ? series[i][j + 1] / yRatio[this.yaxisIndex] : 0) * 2
+        y = getY(series[i][j + 1], lineYPosition)
 
         if (type === 'rangeArea') {
-          y2 =
-            lineYPosition -
-            seriesRangeEnd[i][j + 1] / yRatio[this.yaxisIndex] +
-            (this.isReversed
-              ? seriesRangeEnd[i][j + 1] / yRatio[this.yaxisIndex]
-              : 0) *
-              2
+          y2 = getY(seriesRangeEnd[i][j + 1], lineYPosition)
         }
@@ -572,3 +563,7 @@ }
       // push current Y that will be used as next series's bottom position
-      yArrj.push(y)
+      if (isNull && w.config.stroke.curve === 'smooth') {
+        yArrj.push(null)
+      } else {
+        yArrj.push(y)
+      }
       y2Arrj.push(y2)
@@ -598,4 +593,2 @@
         y2Arrj,
-        pX,
-        pY,
         linePath,
@@ -611,4 +604,2 @@ areaPath,
       linePaths = calculatedPaths.linePaths
-      pX = calculatedPaths.pX
-      pY = calculatedPaths.pY
       areaPath = calculatedPaths.areaPath
@@ -619,3 +610,3 @@ linePath = calculatedPaths.linePath
         this.appendPathFrom &&
-        !(w.config.stroke.curve === 'monotoneCubic' && type === 'rangeArea')
+        !(w.config.stroke.curve === 'smooth' && type === 'rangeArea')
       ) {
@@ -701,4 +692,2 @@ pathFromLine = pathFromLine + graphics.line(x, this.zeroY)
     y2Arrj,
-    pX,
-    pY,
     linePath,
@@ -726,6 +715,5 @@ areaPath,
     if (
-      ((type === 'rangeArea' &&
-        (w.globals.hasNullValues || w.config.forecastDataPoints.count > 0)) ||
-        w.globals.hasNullValues) &&
-      curve === 'monotoneCubic'
+      type === 'rangeArea' &&
+      (w.globals.hasNullValues || w.config.forecastDataPoints.count > 0) &&
+      curve === 'smooth'
     ) {
@@ -735,52 +723,3 @@ curve = 'straight'
 
-    // logic of smooth curve derived from chartist
-    // CREDITS: https://gionkunz.github.io/chartist-js/
     if (curve === 'smooth') {
-      let length = (x - pX) * 0.35
-      if (w.globals.hasNullValues) {
-        if (series[i][j] !== null) {
-          if (series[i][j + 1] !== null) {
-            linePath =
-              graphics.move(pX, pY) +
-              graphics.curve(pX + length, pY, x - length, y, x + 1, y)
-            areaPath =
-              graphics.move(pX + 1, pY) +
-              graphics.curve(pX + length, pY, x - length, y, x + 1, y) +
-              graphics.line(x, areaBottomY) +
-              graphics.line(pX, areaBottomY) +
-              'z'
-          } else {
-            linePath = graphics.move(pX, pY)
-            areaPath = graphics.move(pX, pY) + 'z'
-          }
-        }
-
-        linePaths.push(linePath)
-        areaPaths.push(areaPath)
-      } else {
-        linePath += graphics.curve(pX + length, pY, x - length, y, x, y)
-        areaPath += graphics.curve(pX + length, pY, x - length, y, x, y)
-      }
-
-      pX = x
-      pY = y
-
-      if (j === series[i].length - 2) {
-        // last loop, close path
-        areaPath +=
-          graphics.curve(pX, pY, x, y, x, areaBottomY) +
-          graphics.move(x, y) +
-          'z'
-
-        if (type === 'rangeArea' && isRangeStart) {
-          linePath +=
-            graphics.curve(pX, pY, x, y, x, y2) + graphics.move(x, y2) + 'z'
-        } else {
-          if (!w.globals.hasNullValues) {
-            linePaths.push(linePath)
-            areaPaths.push(areaPath)
-          }
-        }
-      }
-    } else if (curve === 'monotoneCubic') {
       const shouldRenderMonotone =
@@ -792,14 +731,19 @@ type === 'rangeArea'
       if (shouldRenderMonotone) {
-        const monotoneInputPoints = xArrj.map((_, i) => {
-          return [xArrj[i], yArrj[i]]
-        })
+        const smoothInputs = xArrj
+          .map((_, i) => {
+            return [xArrj[i], yArrj[i]]
+          })
+          .filter((_) => _[1] !== null)
 
-        const points = spline.points(monotoneInputPoints)
+        const points = spline.points(smoothInputs)
 
         linePath += svgPath(points)
-        areaPath += svgPath(points)
+        if (series[i][0] === null) {
+          // if the first dataPoint is null, we use the linePath directly
+          areaPath = linePath
+        } else {
+          // else, we append the areaPath
+          areaPath += svgPath(points)
+        }
 
-        pX = x
-        pY = y
-
         if (type === 'rangeArea' && isRangeStart) {
@@ -814,7 +758,7 @@ // draw the line to connect y with y2; then draw the other end of range
           const y2ArrjInversed = y2Arrj.slice().reverse()
-          const monotoneInputPointsY2 = xArrjInversed.map((_, i) => {
+          const smoothInputsY2 = xArrjInversed.map((_, i) => {
             return [xArrjInversed[i], y2ArrjInversed[i]]
           })
 
-          const pointsY2 = spline.points(monotoneInputPointsY2)
+          const pointsY2 = spline.points(smoothInputsY2)
 
@@ -827,4 +771,8 @@ linePath += svgPath(pointsY2)
           areaPath +=
-            graphics.curve(pX, pY, x, y, x, areaBottomY) +
-            graphics.move(x, y) +
+            graphics.line(
+              smoothInputs[smoothInputs.length - 1][0],
+              areaBottomY
+            ) +
+            graphics.line(smoothInputs[0][0], areaBottomY) +
+            graphics.move(smoothInputs[0][0], smoothInputs[0][1]) +
             'z'
@@ -882,4 +830,2 @@ }
       areaPaths,
-      pX,
-      pY,
       linePath,
@@ -886,0 +832,0 @@ areaPath,

src/modules/axes/AxesUtils.js

@@ -38,3 +38,3 @@ import Formatters from '../Formatters'
         dateFormatter: new DateTime(this.ctx).formatDate,
-        w
+        w,
       })
@@ -46,3 +46,3 @@
           dateFormatter: new DateTime(this.ctx).formatDate,
-          w
+          w,
         })
@@ -113,3 +113,3 @@ }
       textRect,
-      isBold
+      isBold,
     }
@@ -116,0 +116,0 @@ }

src/modules/axes/Grid.js

@@ -512,2 +512,3 @@ import Graphics from '../Graphics'
         !w.globals.isBarHorizontal &&
+        w.config.xaxis.tickPlacement === 'on' &&
         (w.config.xaxis.type === 'category' ||
@@ -514,0 +515,0 @@ w.config.xaxis.convertedCatToNumeric)

src/modules/axes/XAxis.js

@@ -213,3 +213,4 @@ import Graphics from '../Graphics'
       let len = dataPoints > 1 ? dataPoints - 1 : dataPoints
-      colWidth = w.globals.gridWidth / len
+      colWidth = w.globals.gridWidth / Math.min(len, labelsLen - 1)
+
       xPos = xPos + colWidthCb(0, colWidth) / 2 + w.config.xaxis.labels.offsetX
@@ -216,0 +217,0 @@ } else {

src/modules/axes/YAxis.js

@@ -45,3 +45,3 @@ import Graphics from '../Graphics'
       rel: realIndex,
-      transform: 'translate(' + w.globals.translateYAxisX[realIndex] + ', 0)'
+      transform: 'translate(' + w.globals.translateYAxisX[realIndex] + ', 0)',
     })
@@ -54,3 +54,3 @@
     let elYaxisTexts = graphics.group({
-      class: 'apexcharts-yaxis-texts-g'
+      class: 'apexcharts-yaxis-texts-g',
     })
@@ -105,5 +105,12 @@
 
+        let offsetY = w.config.yaxis[realIndex].labels.offsetY
+
+        if (w.config.chart.type === 'heatmap') {
+          const divisor = w.globals.gridHeight / w.globals.series.length - 1
+          offsetY = offsetY - divisor / 2
+        }
+
         let label = graphics.drawText({
           x: xPad,
-          y: l + tickAmount / 10 + w.config.yaxis[realIndex].labels.offsetY + 1,
+          y: l + tickAmount / 10 + offsetY + 1,
           text: val,
@@ -117,3 +124,3 @@ textAnchor,
           isPlainText: false,
-          cssClass: 'apexcharts-yaxis-label ' + yaxisStyle.cssClass
+          cssClass: 'apexcharts-yaxis-label ' + yaxisStyle.cssClass,
         })
@@ -145,3 +152,3 @@ if (i === tickAmount) {
       let elYaxisTitle = graphics.group({
-        class: 'apexcharts-yaxis-title'
+        class: 'apexcharts-yaxis-title',
       })
@@ -167,3 +174,3 @@
           'apexcharts-yaxis-title-text ' +
-          w.config.yaxis[realIndex].title.style.cssClass
+          w.config.yaxis[realIndex].title.style.cssClass,
       })
@@ -217,3 +224,3 @@
     let elXaxis = graphics.group({
-      class: 'apexcharts-xaxis apexcharts-yaxis-inversed'
+      class: 'apexcharts-xaxis apexcharts-yaxis-inversed',
     })
@@ -223,3 +230,3 @@
       class: 'apexcharts-xaxis-texts-g',
-      transform: `translate(${w.globals.translateXAxisX}, ${w.globals.translateXAxisY})`
+      transform: `translate(${w.globals.translateXAxisX}, ${w.globals.translateXAxisY})`,
     })
@@ -301,3 +308,3 @@
           cssClass:
-            'apexcharts-xaxis-label ' + w.config.xaxis.labels.style.cssClass
+            'apexcharts-xaxis-label ' + w.config.xaxis.labels.style.cssClass,
         })
@@ -357,3 +364,3 @@
       let elYaxisTitle = graphics.group({
-        class: 'apexcharts-xaxis-title apexcharts-yaxis-title-inversed'
+        class: 'apexcharts-xaxis-title apexcharts-yaxis-title-inversed',
       })
@@ -376,3 +383,3 @@
         cssClass:
-          'apexcharts-xaxis-title-text ' + w.config.xaxis.title.style.cssClass
+          'apexcharts-xaxis-title-text ' + w.config.xaxis.title.style.cssClass,
       })
@@ -393,7 +400,7 @@
       width: 0,
-      height: 0
+      height: 0,
     }
     let yAxisTitleCoord = {
       width: 0,
-      height: 0
+      height: 0,
     }
@@ -456,3 +463,3 @@
         xPos: x,
-        padd: 0
+        padd: 0,
       }
@@ -491,3 +498,3 @@ }
       xPos: x,
-      padd
+      padd,
     }
@@ -494,0 +501,0 @@ }

src/modules/Core.js

@@ -98,3 +98,6 @@ import Bar from '../charts/Bar'
 
-    gl.dom.Paper.node.style.background = cnf.chart.background
+    gl.dom.Paper.node.style.background =
+      cnf.theme.mode === 'dark' && cnf.chart.background === 'transparent'
+        ? 'rgba(0, 0, 0, 0.8)'
+        : cnf.chart.background
 
@@ -101,0 +104,0 @@ this.setSVGDimensions()

src/modules/Data.js

@@ -160,2 +160,10 @@ import CoreUtils from './CoreUtils'
             this.twoDSeriesX.push(ser[activeI].data[j].x)
+
+            if (
+              !isNaN(ser[activeI].data[j].x) &&
+              this.w.config.xaxis.type !== 'category' &&
+              typeof ser[activeI].data[j].x !== 'string'
+            ) {
+              gl.isXNumeric = true
+            }
           }
@@ -293,3 +301,3 @@ } else {
 
-        // mutating config object by adding a new property
+        // CAUTION: mutating config object by adding a new property
         // TODO: As this is specifically for timeline rangebar charts, update the docs mentioning the series only supports xy format
@@ -296,0 +304,0 @@ ser[i].data[j].rangeName = id

src/modules/DataLabels.js

@@ -58,4 +58,5 @@ import Scatter from './../charts/Scatter'
         // next label forward and x not intersecting
-        x > lastDataLabelRect.x + lastDataLabelRect.width + 2 ||
-        y > lastDataLabelRect.y + lastDataLabelRect.height + 2 ||
+        x > lastDataLabelRect.x + lastDataLabelRect.width ||
+        y > lastDataLabelRect.y + lastDataLabelRect.height ||
+        y + height < lastDataLabelRect.y ||
         x + width < lastDataLabelRect.x // next label is going to be drawn backwards
@@ -62,0 +63,0 @@ ) {

src/modules/dimensions/XAxis.js

@@ -31,3 +31,3 @@ import Formatters from '../Formatters'
         width: coords.width,
-        height: coords.height
+        height: coords.height,
       }
@@ -66,3 +66,3 @@ w.globals.rotateXLabels = false
         dateFormatter: new DateTime(this.dCtx.ctx).formatDate,
-        w
+        w,
       })
@@ -72,3 +72,3 @@ valArr = xFormat.xLabelFormat(xlbFormatter, valArr, timestamp, {
         dateFormatter: new DateTime(this.dCtx.ctx).formatDate,
-        w
+        w,
       })
@@ -105,3 +105,3 @@
             ? xLabelrect.height
-            : xArrLabelrect.height
+            : xArrLabelrect.height,
       }
@@ -152,3 +152,3 @@
         width: 0,
-        height: 0
+        height: 0,
       }
@@ -159,3 +159,3 @@ }
       width: rect.width,
-      height: rect.height
+      height: rect.height,
     }
@@ -206,3 +206,3 @@ }
           ? xLabelrect.height
-          : xArrLabelrect.height
+          : xArrLabelrect.height,
     }
@@ -213,3 +213,3 @@
         width: 0,
-        height: 0
+        height: 0,
       }
@@ -220,3 +220,3 @@ }
       width: rect.width,
-      height: rect.height
+      height: rect.height,
     }
@@ -249,3 +249,3 @@ }
       width,
-      height
+      height,
     }
@@ -311,5 +311,4 @@ }
         const firstimescaleLabel = this.dCtx.timescaleLabels[0]
-        const lastTimescaleLabel = this.dCtx.timescaleLabels[
-          this.dCtx.timescaleLabels.length - 1
-        ]
+        const lastTimescaleLabel =
+          this.dCtx.timescaleLabels[this.dCtx.timescaleLabels.length - 1]
 
@@ -316,0 +315,0 @@ const lastLabelPosition =

src/modules/dimensions/YAxis.js

@@ -26,2 +26,7 @@ import Graphics from '../Graphics'
     w.config.yaxis.map((yaxe, index) => {
+      const formatterArgs = {
+        seriesIndex: index,
+        dataPointIndex: -1,
+        w,
+      }
       const yS = w.globals.yAxisScale[index]
@@ -43,11 +48,12 @@ let yAxisMinWidth = 0
         let minV = yS.niceMin === Number.MIN_VALUE ? 0 : yS.niceMin
-        const longestStr =
-          String(minV).length > String(yS.niceMax).length ? minV : yS.niceMax
+        let val = yS.result.reduce((acc, curr) => {
+          return String(lbFormatter(acc, formatterArgs))?.length >
+            String(lbFormatter(curr, formatterArgs))?.length
+            ? acc
+            : curr
+        }, minV)
 
+        val = lbFormatter(val, formatterArgs)
+
         // the second parameter -1 is the index of tick which user can use in the formatter
-        let val = lbFormatter(longestStr, {
-          seriesIndex: index,
-          dataPointIndex: -1,
-          w,
-        })
         let valArr = val
@@ -57,3 +63,3 @@
         if (typeof val === 'undefined' || val.length === 0) {
-          val = longestStr
+          val = yS.niceMax
         }
@@ -60,0 +66,0 @@

src/modules/Fill.js

@@ -136,2 +136,8 @@ import Graphics from './Graphics'
 
+    // in case a color is undefined, fallback to white color to prevent runtime error
+    if (!fillColor) {
+      fillColor = '#fff'
+      console.warn('undefined color - ApexCharts')
+    }
+
     let defaultColor = fillColor
@@ -138,0 +144,0 @@

src/modules/helpers/InitCtxVariables.js

@@ -50,2 +50,3 @@ import Events from '../Events'
       'appendSeries',
+      'isSeriesHidden',
       'toggleSeries',
@@ -52,0 +53,0 @@ 'showSeries',

src/modules/legend/Legend.js

@@ -408,2 +408,3 @@ import CoreUtils from '../CoreUtils'
     const hoverOverLegend =
+      e.target.classList.contains('apexcharts-legend-series') ||
       e.target.classList.contains('apexcharts-legend-text') ||
@@ -438,2 +439,3 @@ e.target.classList.contains('apexcharts-legend-marker')
     if (
+      e.target.classList.contains('apexcharts-legend-series') ||
       e.target.classList.contains('apexcharts-legend-text') ||
@@ -440,0 +442,0 @@ e.target.classList.contains('apexcharts-legend-marker')

src/modules/Range.js

@@ -408,3 +408,3 @@ import Utils from '../utils/Utils'
       } else {
-        gl.xAxisScale = this.scales.linearScale(1, ticks, ticks)
+        gl.xAxisScale = this.scales.linearScale(0, ticks, ticks)
         if (gl.noLabelsProvided && gl.labels.length > 0) {
@@ -411,0 +411,0 @@ gl.xAxisScale = this.scales.linearScale(

src/modules/Scales.js

@@ -507,3 +507,3 @@ import Utils from '../utils/Utils'
       // Also, when a series is collapsed, it results in incorrect behavior. Hence turned it off for that too - fixes apexcharts.js#795
-      console.warn('autoScaleYaxis is not supported in a multi-yaxis chart.')
+      console.warn('autoScaleYaxis not supported in a multi-yaxis chart.')
       return yaxis
@@ -510,0 +510,0 @@ }

src/modules/settings/Config.js

@@ -74,2 +74,6 @@ import Defaults from './Defaults'
 
+      if (opts?.stroke?.curve === 'monotoneCubic') {
+        opts.stroke.curve = 'smooth'
+      }
+
       // If user has specified a dark theme, make the tooltip dark too
@@ -207,3 +211,3 @@ this.checkForDarkTheme(window.Apex) // check global window Apex options
       console.warn(
-        'A multi-series logarithmic chart should have equal number of series and y-axes. Please make sure to equalize both.'
+        'A multi-series logarithmic chart should have equal number of series and y-axes'
       )
@@ -210,0 +214,0 @@ }

src/modules/TimeScale.js

@@ -69,3 +69,3 @@ import DateTime from '../utils/DateTime'
       minMonth: timeIntervals.minMonth,
-      minYear: timeIntervals.minYear
+      minYear: timeIntervals.minYear,
     }
@@ -101,3 +101,3 @@
       numberOfMonths,
-      numberOfYears
+      numberOfYears,
     }
@@ -147,3 +147,3 @@
         hour: ts.hour ? ts.hour : 0,
-        month: ts.month + 1
+        month: ts.month + 1,
       }
@@ -154,3 +154,3 @@ if (ts.unit === 'month') {
           day: 1,
-          value: ts.value + 1
+          value: ts.value + 1,
         }
@@ -160,3 +160,3 @@ } else if (ts.unit === 'day' || ts.unit === 'hour') {
           ...defaultReturn,
-          value: ts.value
+          value: ts.value,
         }
@@ -167,3 +167,3 @@ } else if (ts.unit === 'minute') {
           value: ts.value,
-          minute: ts.value
+          minute: ts.value,
         }
@@ -175,3 +175,3 @@ } else if (ts.unit === 'second') {
           minute: ts.minute,
-          second: ts.second
+          second: ts.second,
         }
@@ -358,3 +358,3 @@ }
     daysWidthOnXAxis,
-    numberOfYears
+    numberOfYears,
   }) {
@@ -387,3 +387,3 @@ let firstTickValue = firstVal.minYear
         year: firstTickValue,
-        month: Utils.monthMod(currentMonth + 1)
+        month: Utils.monthMod(currentMonth + 1),
       })
@@ -397,3 +397,3 @@ } else if (firstVal.minDate === 1 && firstVal.minMonth === 0) {
         year: currentYear,
-        month: Utils.monthMod(currentMonth + 1)
+        month: Utils.monthMod(currentMonth + 1),
       })
@@ -414,3 +414,3 @@ }
         year,
-        month: 1
+        month: 1,
       })
@@ -426,3 +426,3 @@ }
     daysWidthOnXAxis,
-    numberOfMonths
+    numberOfMonths,
   }) {
@@ -464,3 +464,3 @@ let firstTickValue = currentMonth
         year,
-        month
+        month,
       })
@@ -474,3 +474,3 @@ } else {
         year: currentYear,
-        month: Utils.monthMod(currentMonth)
+        month: Utils.monthMod(currentMonth),
       })
@@ -501,3 +501,3 @@ }
         year,
-        month: month === 0 ? 1 : month
+        month: month === 0 ? 1 : month,
       })
@@ -513,3 +513,3 @@ month++
     hoursWidthOnXAxis,
-    numberOfDays
+    numberOfDays,
   }) {
@@ -550,3 +550,4 @@ const dt = new DateTime(this.ctx)
       date = firstVal.minDate
-      numberOfDays++
+      // numberOfDays++
+      // removed the above line to fix https://github.com/apexcharts/apexcharts.js/issues/305#issuecomment-1019520513
     } else if (
@@ -573,3 +574,3 @@ firstVal.minDate !== 1 &&
       month: Utils.monthMod(month),
-      day: date
+      day: date,
     })
@@ -598,3 +599,3 @@
         month: Utils.monthMod(month),
-        day: value
+        day: value,
       })
@@ -610,3 +611,3 @@ }
     minutesWidthOnXAxis,
-    numberOfHours
+    numberOfHours,
   }) {
@@ -642,3 +643,3 @@ const dt = new DateTime(this.ctx)
     let firstTickValue = firstVal.minHour + 1
-    let hour = firstTickValue + 1
+    let hour = firstTickValue
 
@@ -653,4 +654,14 @@ if (remainingMins === 60) {
 
-    let month = changeMonth(date, currentMonth)
+    // we need to apply date switching logic here as well, to avoid duplicated labels
+    if (hour >= 24) {
+      hour = 0
+      date += 1
+      unit = 'day'
+    }
 
+    const checkNextMonth = changeDate(date, currentMonth)
+
+    let month = checkNextMonth.month
+    month = changeMonth(date, month)
+
     // push the first tick in the array
@@ -664,5 +675,7 @@ this.timeScaleArray.push({
       year: currentYear,
-      month: Utils.monthMod(month)
+      month: Utils.monthMod(month),
     })
 
+    hour++
+
     let pos = firstTickPosition
@@ -694,3 +707,3 @@ // keep drawing rest of the ticks
         year,
-        month: Utils.monthMod(month)
+        month: Utils.monthMod(month),
       })
@@ -712,3 +725,3 @@
     secondsWidthOnXAxis,
-    numberOfMinutes
+    numberOfMinutes,
   }) {
@@ -746,3 +759,3 @@ let yrCounter = 0
         year: this._getYear(year, month, yrCounter),
-        month: Utils.monthMod(month)
+        month: Utils.monthMod(month),
       })
@@ -764,3 +777,3 @@
     secondsWidthOnXAxis,
-    numberOfSeconds
+    numberOfSeconds,
   }) {
@@ -803,3 +816,3 @@ let yrCounter = 0
         year: this._getYear(year, month, yrCounter),
-        month: Utils.monthMod(month)
+        month: Utils.monthMod(month),
       })
@@ -890,3 +903,3 @@
         year: ts.year,
-        month: ts.month
+        month: ts.month,
       }
@@ -893,0 +906,0 @@ })

src/modules/Toolbar.js

@@ -73,3 +73,3 @@ import Graphics from './Graphics'
           title: this.localeValues[type],
-          class: `apexcharts-${tool}-icon`
+          class: `apexcharts-${tool}-icon`,
         })
@@ -92,8 +92,7 @@ }
               : icoSelect,
-          title: this.localeValues[
-            z === 'zoom' ? 'selectionZoom' : 'selection'
-          ],
+          title:
+            this.localeValues[z === 'zoom' ? 'selectionZoom' : 'selection'],
           class: w.globals.isTouchDevice
             ? 'apexcharts-element-hidden'
-            : `apexcharts-${z}-icon`
+            : `apexcharts-${z}-icon`,
         })
@@ -112,3 +111,3 @@ }
           ? 'apexcharts-element-hidden'
-          : 'apexcharts-pan-icon'
+          : 'apexcharts-pan-icon',
       })
@@ -124,3 +123,3 @@ }
         title: this.localeValues.menu,
-        class: 'apexcharts-menu-icon'
+        class: 'apexcharts-menu-icon',
       })
@@ -135,3 +134,3 @@ }
         index: this.t.customIcons[i].index,
-        class: 'apexcharts-toolbar-custom-icon ' + this.t.customIcons[i].class
+        class: 'apexcharts-toolbar-custom-icon ' + this.t.customIcons[i].class,
       })
@@ -149,3 +148,3 @@ }
         class: toolbarControls[i].class,
-        title: toolbarControls[i].title
+        title: toolbarControls[i].title,
       })
@@ -175,3 +174,3 @@
     Graphics.setAttrs(this.elMenu, {
-      class: 'apexcharts-menu'
+      class: 'apexcharts-menu',
     })
@@ -182,12 +181,12 @@
         name: 'exportSVG',
-        title: this.localeValues.exportToSVG
+        title: this.localeValues.exportToSVG,
       },
       {
         name: 'exportPNG',
-        title: this.localeValues.exportToPNG
+        title: this.localeValues.exportToPNG,
       },
       {
         name: 'exportCSV',
-        title: this.localeValues.exportToCSV
-      }
+        title: this.localeValues.exportToCSV,
+      },
     ]
@@ -204,3 +203,3 @@
         class: `apexcharts-menu-item ${menuItems[i].name}`,
-        title: menuItems[i].title
+        title: menuItems[i].title,
       })
@@ -380,3 +379,3 @@ this.elMenu.appendChild(this.elMenuItems[i])
       minX: shouldFloor ? Math.floor(newMinX) : newMinX,
-      maxX: shouldFloor ? Math.floor(newMaxX) : newMaxX
+      maxX: shouldFloor ? Math.floor(newMaxX) : newMaxX,
     }
@@ -407,3 +406,3 @@ }
       min: newMinX,
-      max: newMaxX
+      max: newMaxX,
     }
@@ -417,3 +416,3 @@
     let options = {
-      xaxis
+      xaxis,
     }
@@ -425,3 +424,3 @@
       yaxis = scale.autoScaleY(this.ctx, yaxis, {
-        xaxis
+        xaxis,
       })
@@ -485,3 +484,3 @@ }
           series: w.config.series,
-          columnDelimiter: w.config.chart.toolbar.export.csv.columnDelimiter
+          columnDelimiter: w.config.chart.toolbar.export.csv.columnDelimiter,
         })
@@ -499,4 +498,4 @@ break
       // forget lastXAxis min/max as reset button isn't resetting the x-axis completely if zoomX is called before
-      w.globals.lastXAxis.min = undefined
-      w.globals.lastXAxis.max = undefined
+      w.globals.lastXAxis.min = w.globals.initialConfig.xaxis.min
+      w.globals.lastXAxis.max = w.globals.initialConfig.xaxis.max
 
@@ -519,3 +518,3 @@ ch.updateHelpers.revertDefaultAxisMinMax()
           min: w.config.xaxis.min,
-          max: w.config.xaxis.max
+          max: w.config.xaxis.max,
         })
@@ -522,0 +521,0 @@ }

src/modules/tooltip/Position.js

@@ -76,3 +76,3 @@ import Graphics from '../Graphics'
         y1: cy,
-        y2: cy
+        y2: cy,
       })
@@ -83,3 +83,3 @@ }
         y1: cy,
-        y2: cy
+        y2: cy,
       })
@@ -304,3 +304,3 @@ }
       'scatter',
-      'bubble'
+      'bubble',
     ])
@@ -307,0 +307,0 @@

src/modules/tooltip/Utils.js

@@ -72,17 +72,7 @@ import Utilities from '../../utils/Utils'
     let closest = null
-    let seriesXValArr = []
-    let seriesYValArr = []
 
-    //add extra values to show markers for the first points. Included both axes to avoid incorrect positioning of the marker
-    w.globals.seriesXvalues.forEach((value) => {
-      seriesXValArr.push([value[0] + 0.000001].concat(value))
-    })
-    w.globals.seriesYvalues.forEach((value) => {
-      seriesYValArr.push([value[0] + 0.000001].concat(value))
-    })
-
-    seriesXValArr = seriesXValArr.map((seriesXVal) => {
+    let seriesXValArr = w.globals.seriesXvalues.map((seriesXVal) => {
       return seriesXVal.filter((s) => Utilities.isNumber(s))
     })
-    seriesYValArr = seriesYValArr.map((seriesYVal) => {
+    let seriesYValArr = w.globals.seriesYvalues.map((seriesYVal) => {
       return seriesYVal.filter((s) => Utilities.isNumber(s))
@@ -136,3 +126,3 @@ })
       hoverX,
-      hoverY
+      hoverY,
     }
@@ -160,3 +150,3 @@ }
         const newDiff = Math.abs(hoverX - x)
-        if (newDiff < diffX) {
+        if (newDiff <= diffX) {
           diffX = newDiff
@@ -176,3 +166,3 @@ j = iX
         const newDiff = Math.abs(hoverY - arrY[j])
-        if (newDiff < diffY) {
+        if (newDiff <= diffY) {
           diffY = newDiff
@@ -186,3 +176,3 @@ currIndex = iAY
       index: currIndex,
-      j
+      j,
     }
@@ -227,3 +217,3 @@ }
     return {
-      index: currIndex
+      index: currIndex,
     }
@@ -230,0 +220,0 @@ }

src/utils/Utils.js

@@ -138,3 +138,3 @@ /*
   static stripNumber(num, precision = 2) {
-    return parseFloat(num.toPrecision(precision))
+    return Number.isInteger(num) ? num : parseFloat(num.toPrecision(precision))
   }
@@ -141,0 +141,0 @@

types/apexcharts.d.ts

@@ -343,3 +343,3 @@ // Typescript declarations for Apex class and module.
   show?: boolean
-  curve?: 'smooth' | 'straight' | 'stepline' | ('smooth' | 'straight' | 'stepline')[]
+  curve?: 'smooth' | 'straight' | 'stepline' | 'monotoneCubic' | ('smooth' | 'straight' | 'stepline' | 'monotoneCubic')[]
   lineCap?: 'butt' | 'square' | 'round'
@@ -748,2 +748,8 @@ colors?: string[]
 
+type ApexColorStop = {
+  offset: number
+  color: string
+  opacity: number
+}
+
 type ApexFill = {
@@ -762,3 +768,3 @@ colors?: any[]
     stops?: number[],
-    colorStops?: any[]
+    colorStops?: ApexColorStop[][] | ApexColorStop[]
   }
@@ -765,0 +771,0 @@ image?: {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4390893

increased by0.09%

Lines of code

70832

increased by0.04%

Number of lines in readme file

231

increased by0.87%

No dependency changes