apexcharts - npm Package Compare versions

Comparing version 4.0.0 to 4.1.0

dist/locales/nl.json

@@ -5,39 +5,47 @@ {
     "months": [
-      "Januari",
-      "Februari",
-      "Maart",
-      "April",
-      "Mei",
-      "Juni",
-      "Juli",
-      "Augustus",
-      "September",
-      "Oktober",
-      "November",
-      "December"
+      "januari",
+      "februari",
+      "maart",
+      "april",
+      "mei",
+      "juni",
+      "juli",
+      "augustus",
+      "september",
+      "oktober",
+      "november",
+      "december"
     ],
     "shortMonths": [
-      "Jan",
-      "Feb",
-      "Mrt",
-      "Apr",
-      "Mei",
-      "Jun",
-      "Jul",
-      "Aug",
-      "Sep",
-      "Okt",
-      "Nov",
-      "Dec"
+      "jan.",
+      "feb.",
+      "mrt.",
+      "apr.",
+      "mei.",
+      "jun.",
+      "jul.",
+      "aug.",
+      "sep.",
+      "okt.",
+      "nov.",
+      "dec."
     ],
     "days": [
-      "Zondag",
-      "Maandag",
-      "Dinsdag",
-      "Woensdag",
-      "Donderdag",
-      "Vrijdag",
-      "Zaterdag"
+      "zondag",
+      "maandag",
+      "dinsdag",
+      "woensdag",
+      "donderdag",
+      "vrijdag",
+      "zaterdag"
     ],
-    "shortDays": ["Zo", "Ma", "Di", "Wo", "Do", "Vr", "Za"],
+    "shortDays": [
+      "zo.",
+      "ma.",
+      "di.",
+      "wo.",
+      "do.",
+      "vr.",
+      "za."
+    ],
     "toolbar": {
@@ -56,2 +64,2 @@ "exportToSVG": "Download SVG",
   }
-}
+}

package.json

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

src/apexcharts.js

@@ -53,3 +53,3 @@ import Annotations from './modules/annotations/Annotations'
       // only draw chart, if element found
-      if (this.el !== null) {
+      if (Utils.elementExists(this.el)) {
         if (typeof Apex._chartInstances === 'undefined') {
@@ -133,2 +133,8 @@ Apex._chartInstances = []
 
+    if (!Utils.elementExists(this.el)) {
+      gl.animationEnded = true
+      this.destroy()
+      return null
+    }
+
     this.responsive.checkResponsiveConfig(opts)
@@ -141,7 +147,2 @@
 
-    if (this.el === null) {
-      gl.animationEnded = true
-      return null
-    }
-
     this.core.setupElements()
@@ -148,0 +149,0 @@

src/charts/Bar.js

@@ -154,3 +154,3 @@ import BarDataLabels from './common/bar/DataLabels'
 
-      if (!this.horizontal) {
+      if (!this.isHorizontal) {
         xArrj.push(x + barWidth / 2)
@@ -235,4 +235,7 @@ }
 
-          if (barShadow) {
-            elBarShadows.add(barShadow)
+          elBarShadows.add(barShadow)
+
+          if (w.config.chart.dropShadow.enabled) {
+            const filters = new Filters(this.ctx)
+            filters.dropShadow(barShadow, w.config.chart.dropShadow, realIndex)
           }
@@ -638,3 +641,3 @@ }
     }
-    if (w.globals.seriesX[sxI][j]) {
+    if (Utils.isNumber(w.globals.seriesX[sxI][j])) {
       x =
@@ -641,0 +644,0 @@ (w.globals.seriesX[sxI][j] - w.globals.minX) / this.xRatio -

src/charts/BoxCandleStick.js

@@ -97,2 +97,6 @@ import CoreUtils from '../modules/CoreUtils'
 
+      let elGoalsMarkers = graphics.group({
+        class: 'apexcharts-bar-goals-markers',
+      })
+
       for (let j = 0; j < w.globals.dataPoints; j++) {
@@ -134,2 +138,15 @@ const strokeWidth = this.barHelpers.getStrokeWidth(i, j, realIndex)
 
+        const barGoalLine = this.barHelpers.drawGoalLine({
+          barXPosition: paths.barXPosition,
+          barYPosition: paths.barYPosition,
+          goalX: paths.goalX,
+          goalY: paths.goalY,
+          barHeight,
+          barWidth,
+        })
+
+        if (barGoalLine) {
+          elGoalsMarkers.add(barGoalLine)
+        }
+
         // push current X
@@ -172,2 +189,3 @@ if (j > 0) {
             elDataLabelsWrap,
+            elGoalsMarkers,
             visibleSeries: this.visibleI,
@@ -310,2 +328,10 @@ type: w.config.chart.type,
       y: y2,
+      goalY: this.barHelpers.getGoalValues(
+        'y',
+        null,
+        zeroH,
+        i,
+        j,
+        indexes.translationsIndex
+      ),
       barXPosition,
@@ -414,2 +440,3 @@ color: this.isBoxPlot ? color : isPositive ? [colorPos] : [colorNeg],
       y,
+      goalX: this.barHelpers.getGoalValues('x', zeroW, null, i, j),
       barYPosition,
@@ -416,0 +443,0 @@ color,

src/charts/common/bar/Helpers.js

@@ -204,6 +204,2 @@ import Fill from '../../../modules/Fill'
 
-    if (w.config.series[i].data[j]?.fillColor) {
-      fillColor = w.config.series[i].data[j].fillColor
-    }
-
     let pathFill = fill.fillPath({
@@ -756,3 +752,3 @@ seriesNumber: this.barCtx.barOptions.distributed
       fillOpacity: 1,
-      classes: 'apexcharts-bar-shadows',
+      classes: 'apexcharts-bar-shadow apexcharts-decoration-element',
     })
@@ -759,0 +755,0 @@ }

src/charts/Line.js

@@ -706,2 +706,3 @@ import CoreUtils from '../modules/CoreUtils'
         this.appendPathFrom &&
+        !w.globals.hasNullValues &&
         !(curve === 'monotoneCubic' && type === 'rangeArea')
@@ -957,3 +958,6 @@ ) {
               // Check for single isolated point
-              if (series[i][j + 1] === null) {
+              if (
+                series[i][j + 1] === null ||
+                typeof series[i][j + 1] === 'undefined'
+              ) {
                 linePaths.push(linePath)
@@ -1047,3 +1051,6 @@ areaPaths.push(areaPath)
               // Check for single isolated point
-              if (series[i][j + 1] === null) {
+              if (
+                series[i][j + 1] === null ||
+                typeof series[i][j + 1] === 'undefined'
+              ) {
                 linePaths.push(linePath)
@@ -1050,0 +1057,0 @@ areaPaths.push(areaPath)

src/charts/Treemap.js

@@ -115,8 +115,2 @@ import '../libs/Treemap-squared'
 
-        if (
-          typeof w.config.series[i].data[j] !== 'undefined' &&
-          w.config.series[i].data[j].fillColor
-        ) {
-          color = w.config.series[i].data[j].fillColor
-        }
         let pathFill = fill.fillPath({
@@ -123,0 +117,0 @@ color,

src/locales/nl.json

@@ -5,39 +5,47 @@ {
     "months": [
-      "Januari",
-      "Februari",
-      "Maart",
-      "April",
-      "Mei",
-      "Juni",
-      "Juli",
-      "Augustus",
-      "September",
-      "Oktober",
-      "November",
-      "December"
+      "januari",
+      "februari",
+      "maart",
+      "april",
+      "mei",
+      "juni",
+      "juli",
+      "augustus",
+      "september",
+      "oktober",
+      "november",
+      "december"
     ],
     "shortMonths": [
-      "Jan",
-      "Feb",
-      "Mrt",
-      "Apr",
-      "Mei",
-      "Jun",
-      "Jul",
-      "Aug",
-      "Sep",
-      "Okt",
-      "Nov",
-      "Dec"
+      "jan.",
+      "feb.",
+      "mrt.",
+      "apr.",
+      "mei.",
+      "jun.",
+      "jul.",
+      "aug.",
+      "sep.",
+      "okt.",
+      "nov.",
+      "dec."
     ],
     "days": [
-      "Zondag",
-      "Maandag",
-      "Dinsdag",
-      "Woensdag",
-      "Donderdag",
-      "Vrijdag",
-      "Zaterdag"
+      "zondag",
+      "maandag",
+      "dinsdag",
+      "woensdag",
+      "donderdag",
+      "vrijdag",
+      "zaterdag"
     ],
-    "shortDays": ["Zo", "Ma", "Di", "Wo", "Do", "Vr", "Za"],
+    "shortDays": [
+      "zo.",
+      "ma.",
+      "di.",
+      "wo.",
+      "do.",
+      "vr.",
+      "za."
+    ],
     "toolbar": {
@@ -56,2 +64,2 @@ "exportToSVG": "Download SVG",
   }
-}
+}

src/modules/Fill.js

@@ -99,2 +99,56 @@ import Graphics from './Graphics'
 
+  computeColorStops(data, multiColorConfig) {
+    const w = this.w
+    let maxPositive = null
+    let minNegative = null
+
+    for (let value of data) {
+      if (value >= multiColorConfig.threshold) {
+        if (maxPositive === null || value > maxPositive) {
+          maxPositive = value
+        }
+      } else {
+        if (minNegative === null || value < minNegative) {
+          minNegative = value
+        }
+      }
+    }
+
+    if (maxPositive === null) {
+      maxPositive = multiColorConfig.threshold
+    }
+    if (minNegative === null) {
+      minNegative = multiColorConfig.threshold
+    }
+
+    let totalRange =
+      maxPositive -
+      multiColorConfig.threshold +
+      (multiColorConfig.threshold - minNegative)
+
+    if (totalRange === 0) {
+      totalRange = 1
+    }
+
+    let negativePercentage =
+      ((multiColorConfig.threshold - minNegative) / totalRange) * 100
+
+    let offset = 100 - negativePercentage
+
+    offset = Math.max(0, Math.min(offset, 100))
+
+    return [
+      {
+        offset: offset,
+        color: multiColorConfig.colorAboveThreshold,
+        opacity: w.config.fill.opacity,
+      },
+      {
+        offset: 0,
+        color: multiColorConfig.colorBelowThreshold,
+        opacity: w.config.fill.opacity,
+      },
+    ]
+  }
+
   fillPath(opts) {
@@ -111,2 +165,6 @@ let w = this.w
 
+    const drawMultiColorLine =
+      cnf.plotOptions.line.colors.colorAboveThreshold &&
+      cnf.plotOptions.line.colors.colorBelowThreshold
+
     let fillColors = this.getFillColors()
@@ -135,2 +193,5 @@ let fillColor = fillColors[this.seriesIndex]
 
+    // when line colors needs to be different based on values, we use gradient config to achieve this
+    const useGradient = fillType === 'gradient' || drawMultiColorLine
+
     if (opts.color) {
@@ -140,2 +201,10 @@ fillColor = opts.color
 
+    if (
+      w.config.series[this.seriesIndex]?.data?.[opts.dataPointIndex]?.fillColor
+    ) {
+      fillColor =
+        w.config.series[this.seriesIndex]?.data?.[opts.dataPointIndex]
+          ?.fillColor
+    }
+
     // in case a color is undefined, fallback to white color to prevent runtime error
@@ -150,3 +219,5 @@ if (!fillColor) {
     if (fillColor.indexOf('rgb') === -1) {
-      if (fillColor.length < 9) {
+      if (fillColor.indexOf('#') === -1) {
+        defaultColor = fillColor
+      } else if (fillColor.length < 9) {
         // if the hex contains alpha and is of 9 digit, skip the opacity
@@ -159,3 +230,2 @@ defaultColor = Utils.hexToRgba(fillColor, fillOpacity)
       } else {
-        // if rgb color, apply opacity
         defaultColor = Utils.hexToRgba(Utils.rgb2hex(fillColor), fillOpacity)
@@ -176,7 +246,19 @@ }
 
-    if (fillType === 'gradient') {
+    if (useGradient) {
+      let colorStops = [...cnf.fill.gradient.colorStops] || []
+      let type = cnf.fill.gradient.type
+      if (drawMultiColorLine) {
+        colorStops[this.seriesIndex] = this.computeColorStops(
+          w.globals.series[this.seriesIndex],
+          cnf.plotOptions.line.colors
+        )
+        type = 'vertical'
+      }
+
       gradientFill = this.handleGradientFill({
+        type,
         fillConfig: opts.fillConfig,
         fillColor,
         fillOpacity,
+        colorStops,
         i: this.seriesIndex,
@@ -212,3 +294,3 @@ })
       pathFill = `url(#${patternKey})`
-    } else if (fillType === 'gradient') {
+    } else if (useGradient) {
       pathFill = gradientFill
@@ -337,3 +419,10 @@ } else if (fillType === 'pattern') {
 
-  handleGradientFill({ fillColor, fillOpacity, fillConfig, i }) {
+  handleGradientFill({
+    type,
+    fillColor,
+    fillOpacity,
+    fillConfig,
+    colorStops,
+    i,
+  }) {
     let fillCnf = this.w.config.fill
@@ -351,3 +440,3 @@
 
-    let type = fillCnf.gradient.type
+    type = type || fillCnf.gradient.type
     let gradientFrom = fillColor
@@ -427,3 +516,3 @@ let gradientTo
       fillCnf.gradient.stops,
-      fillCnf.gradient.colorStops,
+      colorStops,
       i
@@ -430,0 +519,0 @@ )

src/modules/Filters.js

@@ -24,106 +24,50 @@ import Filter from '@svgdotjs/svg.filter.js'
 
-    if (w.config.states.normal.filter !== 'none') {
-      this.applyFilter(
-        el,
-        i,
-        w.config.states.normal.filter.type,
-        w.config.states.normal.filter.value
-      )
-    } else {
-      if (w.config.chart.dropShadow.enabled) {
-        this.dropShadow(el, w.config.chart.dropShadow, i)
-      }
+    if (w.config.chart.dropShadow.enabled) {
+      this.dropShadow(el, w.config.chart.dropShadow, i)
     }
   }
 
-  addNormalFilter(el, i) {
+  applyFilter(el, i, filterType) {
     const w = this.w
+    el.unfilter(true)
 
-    // revert shadow if it was there
-    // but, ignore marker as marker don't have dropshadow yet
-    if (
-      w.config.chart.dropShadow.enabled &&
-      !el.node.classList.contains('apexcharts-marker')
-    ) {
-      this.dropShadow(el, w.config.chart.dropShadow, i)
+    if (filterType === 'none') {
+      this.getDefaultFilter(el, i)
+      return
     }
-  }
 
-  // appends dropShadow to the filter object which can be chained with other filter effects
-  addLightenFilter(el, i, attrs) {
-    const w = this.w
-    const { intensity } = attrs
+    const shadowAttr = w.config.chart.dropShadow
+    const brightnessFactor = filterType === 'lighten' ? 2 : 0.3
 
-    el.unfilter(true)
-
-    let filter = new Filter()
-
     el.filterWith((add) => {
-      const shadowAttr = w.config.chart.dropShadow
-      if (shadowAttr.enabled) {
-        filter = this.addShadow(add, i, shadowAttr)
-      } else {
-        filter = add
-      }
-      filter.componentTransfer({
-        rgb: { type: 'linear', slope: 1.5, intercept: intensity },
+      add.colorMatrix({
+        type: 'matrix',
+        values: `
+          ${brightnessFactor} 0 0 0 0
+          0 ${brightnessFactor} 0 0 0
+          0 0 ${brightnessFactor} 0 0
+          0 0 0 1 0
+        `,
+        in: 'SourceGraphic',
+        result: 'brightness',
       })
-    })
-    el.filterer().node.setAttribute('filterUnits', 'userSpaceOnUse')
 
-    this._scaleFilterSize(el.filterer().node)
-  }
-
-  // appends dropShadow to the filter object which can be chained with other filter effects
-  addDarkenFilter(el, i, attrs) {
-    const w = this.w
-    const { intensity } = attrs
-
-    el.unfilter(true)
-
-    let filter = new Filter()
-
-    el.filterWith((add) => {
-      const shadowAttr = w.config.chart.dropShadow
       if (shadowAttr.enabled) {
-        filter = this.addShadow(add, i, shadowAttr)
-      } else {
-        filter = add
+        this.addShadow(add, i, shadowAttr, 'brightness')
       }
-      filter.componentTransfer({
-        rgb: { type: 'linear', slope: intensity },
-      })
     })
-    el.filterer().node.setAttribute('filterUnits', 'userSpaceOnUse')
-    this._scaleFilterSize(el.filterer().node)
-  }
 
-  applyFilter(el, i, filter, intensity = 0.5) {
-    switch (filter) {
-      case 'none': {
-        this.addNormalFilter(el, i)
-        break
-      }
-      case 'lighten': {
-        this.addLightenFilter(el, i, {
-          intensity,
-        })
-        break
-      }
-      case 'darken': {
-        this.addDarkenFilter(el, i, {
-          intensity,
-        })
-        break
-      }
-      default:
-        // do nothing
-        break
+    if (!shadowAttr.noUserSpaceOnUse) {
+      el.filterer()?.node?.setAttribute('filterUnits', 'userSpaceOnUse')
     }
+
+    // this scales the filter to a bigger size so that the dropshadow doesn't crops
+    this._scaleFilterSize(el.filterer()?.node)
   }
 
   // appends dropShadow to the filter object which can be chained with other filter effects
-  addShadow(add, i, attrs) {
+  addShadow(add, i, attrs, source) {
     const w = this.w
-    const { blur, top, left, color, opacity } = attrs
+    let { blur, top, left, color, opacity } = attrs
+    color = Array.isArray(color) ? color[i] : color
 
@@ -136,15 +80,33 @@ if (w.config.chart.dropShadow.enabledOnSeries?.length > 0) {
 
-    let shadowBlur = add
-      .flood(Array.isArray(color) ? color[i] : color, opacity)
-      .composite(add.$sourceAlpha, 'in')
-      .offset(left, top)
-      .gaussianBlur(blur)
-      .merge(add.$source)
-    return add.blend(add.$source, shadowBlur)
+    add.offset({
+      in: source,
+      dx: left,
+      dy: top,
+      result: 'offset',
+    })
+
+    add.gaussianBlur({
+      in: 'offset',
+      stdDeviation: blur,
+      result: 'blur',
+    })
+
+    add.flood({
+      'flood-color': color,
+      'flood-opacity': opacity,
+      result: 'flood',
+    })
+
+    add.composite({
+      in: 'flood',
+      in2: 'blur',
+      operator: 'in',
+      result: 'shadow',
+    })
+
+    add.merge(['shadow', source])
   }
 
   // directly adds dropShadow to the element and returns the same element.
-  // the only way it is different from the addShadow() function is that addShadow is chainable to other filters, while this function discards all filters and add dropShadow
   dropShadow(el, attrs, i = 0) {
-    let { top, left, blur, color, opacity, noUserSpaceOnUse } = attrs
     const w = this.w
@@ -165,19 +127,12 @@
 
-    color = Array.isArray(color) ? color[i] : color
-
     el.filterWith((add) => {
-      let shadowBlur = add
-        .flood(color, opacity)
-        .composite(add.$sourceAlpha, 'in')
-        .offset(left, top)
-        .gaussianBlur(blur)
-
-      add.blend(add.$source, shadowBlur)
+      this.addShadow(add, i, attrs, 'SourceGraphic')
     })
 
-    if (!noUserSpaceOnUse) {
+    if (!attrs.noUserSpaceOnUse) {
       el.filterer().node.setAttribute('filterUnits', 'userSpaceOnUse')
     }
 
-    this._scaleFilterSize(el.filterer().node)
+    // this scales the filter to a bigger size so that the dropshadow doesn't crops
+    this._scaleFilterSize(el.filterer()?.node)
 
@@ -196,3 +151,3 @@ return el
         if (activeFilter !== 'none') {
-          this.applyFilter(el, realIndex, activeFilter.type, activeFilter.value)
+          this.applyFilter(el, realIndex, activeFilter.type)
         }
@@ -204,2 +159,3 @@ }
   _scaleFilterSize(el) {
+    if (!el) return
     const setAttributes = (attrs) => {
@@ -206,0 +162,0 @@ for (let key in attrs) {

src/modules/Graphics.js

@@ -457,11 +457,4 @@ import Animations from './Animations'
 
-    // const defaultFilter = el.filterer
-
-    if (w.config.states.normal.filter.type !== 'none') {
-      filters.getDefaultFilter(el, realIndex)
-    } else {
-      if (w.config.chart.dropShadow.enabled && drawShadow) {
-        const shadow = w.config.chart.dropShadow
-        filters.dropShadow(el, shadow, realIndex)
-      }
+    if (w.config.chart.dropShadow.enabled && drawShadow) {
+      filters.dropShadow(el, w.config.chart.dropShadow, realIndex)
     }
@@ -559,3 +552,3 @@
     stops = null,
-    colorStops = null,
+    colorStops = [],
     i = 0
@@ -593,3 +586,3 @@ ) {
 
-    if (colorStops === null || colorStops.length === 0) {
+    if (!colorStops || colorStops.length === 0) {
       g = w.globals.dom.Paper.gradient(radial ? 'radial' : 'linear', (add) => {
@@ -895,3 +888,3 @@ add.stop(stop1, gfrom, opacityFrom)
         let hoverFilter = w.config.states.hover.filter
-        filters.applyFilter(path, i, hoverFilter.type, hoverFilter.value)
+        filters.applyFilter(path, i, hoverFilter.type)
       }
@@ -954,6 +947,6 @@ }
         const elPaths = w.globals.dom.Paper.find(
-          '.apexcharts-series path'
+          '.apexcharts-series path:not(.apexcharts-decoration-element)'
         )
         const elCircles = w.globals.dom.Paper.find(
-          '.apexcharts-series circle, .apexcharts-series rect'
+          '.apexcharts-series circle:not(.apexcharts-decoration-element), .apexcharts-series rect:not(.apexcharts-decoration-element)'
         )
@@ -983,3 +976,3 @@
       if (activeFilter !== 'none') {
-        filters.applyFilter(path, i, activeFilter.type, activeFilter.value)
+        filters.applyFilter(path, i, activeFilter.type)
       } else {
@@ -990,3 +983,3 @@ // Reapply the hover filter in case it was removed by `deselect`when there is no active filter and it is not a touch device
             var hoverFilter = w.config.states.hover.filter
-            filters.applyFilter(path, i, hoverFilter.type, hoverFilter.value)
+            filters.applyFilter(path, i, hoverFilter.type)
           }
@@ -1003,3 +996,3 @@ }
           var hoverFilter = w.config.states.hover.filter
-          filters.applyFilter(path, i, hoverFilter.type, hoverFilter.value)
+          filters.applyFilter(path, i, hoverFilter.type)
         } else {
@@ -1006,0 +999,0 @@ filters.getDefaultFilter(path, i)

src/modules/legend/Helpers.js

@@ -252,3 +252,5 @@ import Graphics from '../Graphics'
           }
-          series[realIndex].hidden = false
+          if (typeof series[realIndex] !== 'number') {
+            series[realIndex].hidden = false
+          }
           collapsedSeries.splice(c, 1)
@@ -255,0 +257,0 @@ seriesIndices.splice(c, 1)

src/modules/legend/Legend.js

@@ -1,2 +0,2 @@
-import {SVG} from '@svgdotjs/svg.js'
+import { SVG } from '@svgdotjs/svg.js'
 
@@ -115,3 +115,3 @@ import CoreUtils from '../CoreUtils'
 
-      const SVGMarker = SVG().addTo(elMarker).size('100%', '100%')
+      const SVGMarker = window.SVG().addTo(elMarker).size('100%', '100%')
       const marker = new Graphics(this.ctx).drawMarker(0, 0, {
@@ -125,3 +125,5 @@ ...markerConfig,
 
-      const shapesEls = w.globals.dom.Paper.find('.apexcharts-legend-marker.apexcharts-marker')
+      const shapesEls = w.globals.dom.Paper.find(
+        '.apexcharts-legend-marker.apexcharts-marker'
+      )
       shapesEls.forEach((shapeEl) => {
@@ -128,0 +130,0 @@ if (shapeEl.node.classList.contains('apexcharts-marker-triangle')) {

src/modules/Markers.js

@@ -6,3 +6,3 @@ import Filters from './Filters'
 /**
- * ApexCharts Markers Class for drawing points on y values in axes charts.
+ * ApexCharts Markers Class for drawing markers on y values in axes charts.
  *
@@ -43,32 +43,15 @@ * @module Markers
     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])
 
@@ -79,3 +62,3 @@ // a small hack as we have 2 points for the first val to connect it
 
-        let PointClasses = 'apexcharts-marker'
+        let markerClasses = 'apexcharts-marker'
         if (
@@ -86,3 +69,3 @@ (w.config.chart.type === 'line' || w.config.chart.type === 'area') &&
         ) {
-          PointClasses += ' no-pointer-events'
+          markerClasses += ' no-pointer-events'
         }
@@ -95,10 +78,8 @@
         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,
@@ -133,15 +114,37 @@ dataPointIndex,
 
-          point = graphics.drawMarker(p.x[q], p.y[q], opts)
+          if (!invalidMarker) {
+            const shouldCreateMarkerWrap =
+              w.globals.markers.size[seriesIndex] > 0 ||
+              alwaysDrawMarker ||
+              hasDiscreteMarkers
+            if (shouldCreateMarkerWrap && !elMarkersWrap) {
+              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)
 
-          point.attr('rel', dataPointIndex)
-          point.attr('j', dataPointIndex)
-          point.attr('index', seriesIndex)
-          point.node.setAttribute('default-marker-size', opts.pSize)
+            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(point, seriesIndex, dataPointIndex)
-          this.addEvents(point)
+            const filters = new Filters(this.ctx)
+            filters.setSelectionFilter(
+              markerElement,
+              seriesIndex,
+              dataPointIndex
+            )
+            this.addEvents(markerElement)
 
-          if (elPointsWrap) {
-            elPointsWrap.add(point)
+            if (elMarkersWrap) {
+              elMarkersWrap.add(markerElement)
+            }
           }
@@ -158,3 +161,3 @@ } else {
 
-    return elPointsWrap
+    return elMarkersWrap
   }
@@ -161,0 +164,0 @@

src/modules/settings/Options.js

@@ -409,2 +409,7 @@ /**
           isSlopeChart: false,
+          colors: {
+            threshold: 0,
+            colorAboveThreshold: undefined,
+            colorBelowThreshold: undefined,
+          },
         },
@@ -869,12 +874,5 @@ area: {
       states: {
-        normal: {
-          filter: {
-            type: 'none',
-            value: 0,
-          },
-        },
         hover: {
           filter: {
             type: 'lighten',
-            value: 0.1,
           },
@@ -886,3 +884,2 @@ },
             type: 'darken',
-            value: 0.5,
           },
@@ -889,0 +886,0 @@ },

src/modules/TimeScale.js

@@ -638,2 +638,4 @@ import DateTime from '../utils/DateTime'
       unit = 'day'
+      // Unit changed to day , Value should align unit 
+      firstTickValue = date
     }
@@ -640,0 +642,0 @@

src/modules/tooltip/Intersect.js

@@ -162,2 +162,6 @@ import Utils from '../../utils/Utils'
     })
+    if (barXY.j === null && barXY.barHeight === 0 && barXY.barWidth === 0) {
+      return // bar was not hovered and didn't receive correct coords
+    }
+
     i = barXY.i
@@ -196,6 +200,2 @@ let j = barXY.j
 
-    const isReversed = w.globals.isMultipleYAxis
-      ? w.config.yaxis[seriesIndex] && w.config.yaxis[seriesIndex].reversed
-      : w.config.yaxis[0].reversed
-
     if (x + ttCtx.tooltipRect.ttWidth > w.globals.gridWidth) {
@@ -202,0 +202,0 @@ x = x - ttCtx.tooltipRect.ttWidth

src/modules/tooltip/Labels.js

@@ -240,3 +240,4 @@ import Formatters from '../Formatters'
       yLbTitleFormatter = function (label) {
-        return label
+        // refrence used from line: 966 in Options.js
+         return label ? label + ': ' : ''
       }
@@ -243,0 +244,0 @@ }

src/modules/tooltip/Marker.js

@@ -187,3 +187,3 @@ import Graphics from '../Graphics'
 
-      if (Utils.isNumber(size) && size >= 0) {
+      if (Utils.isNumber(size) && size > 0) {
         const path = this.ttCtx.tooltipUtil.getPathFromPoint(points[p], size)
@@ -190,0 +190,0 @@ points[p].setAttribute('d', path)

src/modules/tooltip/Tooltip.js

@@ -357,3 +357,3 @@ import Labels from './Labels'
 
-    const targetDelay = 100
+    const targetDelay = 20
     const timeSinceLastUpdate = Date.now() - this.lastHoverTime
@@ -880,5 +880,3 @@ if (timeSinceLastUpdate >= targetDelay) {
           let graphics = new Graphics(this.ctx)
-          let paths = w.globals.dom.Paper.find(
-            `.apexcharts-bar-area[j='${j}']`
-          )
+          let paths = w.globals.dom.Paper.find(`.apexcharts-bar-area[j='${j}']`)
 
@@ -885,0 +883,0 @@ // de-activate first

src/modules/ZoomPanSelection.js

@@ -104,3 +104,6 @@ import Graphics from './Graphics'
 
-    if (w.config.chart.zoom.allowMouseWheelZoom) {
+    if (
+      w.config.chart.zoom.enabled &&
+      w.config.chart.zoom.allowMouseWheelZoom
+    ) {
       this.hoverArea.addEventListener('wheel', me.mouseWheelEvent.bind(me), {
@@ -175,3 +178,3 @@ capture: false,
 
-    if (e.type === 'mousedown' && e.which === 1) {
+    if ((e.type === 'mousedown' && e.which === 1) || e.type === 'touchstart') {
       let gridRectDim = me.gridRect.getBoundingClientRect()
@@ -178,0 +181,0 @@

src/utils/Utils.js

@@ -164,2 +164,9 @@ /*
 
+  static elementExists(element) {
+    if (!element || !element.isConnected) {
+      return false
+    }
+    return true
+  }
+
   static getDimensions(el) {
@@ -166,0 +173,0 @@ const computedStyle = getComputedStyle(el, null)

types/apexcharts.d.ts

@@ -46,3 +46,3 @@ // Typescript declarations for Apex class and module.
   static exec(chartID: string, fn: string, ...args: Array<any>): any
-  static getChartByID(chartID: string): ApexCharts|undefined
+  static getChartByID(chartID: string): ApexCharts | undefined
   static initOnLoad(): void
@@ -105,18 +105,18 @@ exports: {
   type?:
-    | 'line'
-    | 'area'
-    | 'bar'
-    | 'pie'
-    | 'donut'
-    | 'radialBar'
-    | 'scatter'
-    | 'bubble'
-    | 'heatmap'
-    | 'candlestick'
-    | 'boxPlot'
-    | 'radar'
-    | 'polarArea'
-    | 'rangeBar'
-    | 'rangeArea'
-    | 'treemap'
+  | 'line'
+  | 'area'
+  | 'bar'
+  | 'pie'
+  | 'donut'
+  | 'radialBar'
+  | 'scatter'
+  | 'bubble'
+  | 'heatmap'
+  | 'candlestick'
+  | 'boxPlot'
+  | 'radar'
+  | 'polarArea'
+  | 'rangeBar'
+  | 'rangeArea'
+  | 'treemap'
   foreColor?: string
@@ -265,12 +265,5 @@ fontFamily?: string
 type ApexStates = {
-  normal?: {
-    filter?: {
-      type?: string
-      value?: number
-    }
-  }
   hover?: {
     filter?: {
       type?: string
-      value?: number
     }
@@ -282,3 +275,2 @@ }
       type?: string
-      value?: number
     }
@@ -329,17 +321,25 @@ }
   data:
-    | (number | null)[]
-    | {
-        x: any;
-        y: any;
-        fill?: ApexFill;
-        fillColor?: string;
-        strokeColor?: string;
-        meta?: any;
-        goals?: any;
-        barHeightOffset?: number;
-        columnWidthOffset?: number;
-      }[]
-    | [number, number | null][]
-    | [number, (number | null)[]][]
-    | number[][];
+  | (number | null)[]
+  | {
+    x: any;
+    y: any;
+    fill?: ApexFill;
+    fillColor?: string;
+    strokeColor?: string;
+    meta?: any;
+    goals?: {
+      name?: string,
+      value: number,
+      strokeHeight?: number;
+      strokeWidth?: number;
+      strokeColor?: string;
+      strokeDashArray?: number;
+      strokeLineCap?: 'butt' | 'square' | 'round'
+    }[];
+    barHeightOffset?: number;
+    columnWidthOffset?: number;
+  }[]
+  | [number, number | null][]
+  | [number, (number | null)[]][]
+  | number[][];
 }[]
@@ -522,2 +522,7 @@
     isSlopeChart?: boolean
+    colors?: {
+      threshold?: number,
+      colorAboveThreshold?: string,
+      colorBelowThreshold?: string,
+    },
   }
@@ -932,3 +937,3 @@ area?: {
   dropShadow?: ApexDropShadow
-  formatter?(val: string | number | number[], opts?: any): string | number | string[]
+  formatter?(val: string | number | number[], opts?: any): string | number | (string | string)[]
 }
@@ -1026,3 +1031,3 @@
     format?: string
-    formatter?(value: string, timestamp?: number, opts?:any): string | string[]
+    formatter?(value: string, timestamp?: number, opts?: any): string | string[]
     datetimeUTC?: boolean
@@ -1039,10 +1044,10 @@ datetimeFormatter?: {
   group?: {
-      groups?: { title: string, cols: number }[],
-      style?:  {
-        colors?: string | string[]
-        fontSize?: string
-        fontFamily?: string
-        fontWeight?: string | number
-        cssClass?: string
-      }
+    groups?: { title: string, cols: number }[],
+    style?: {
+      colors?: string | string[]
+      fontSize?: string
+      fontFamily?: string
+      fontWeight?: string | number
+      cssClass?: string
+    }
   }
@@ -1049,0 +1054,0 @@ axisBorder?: {

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

4883304

increased by0.2%

Lines of code

76034

increased by0.19%

No dependency changes