apexcharts - npm Package Compare versions

Comparing version 3.12.0 to 3.13.0

package.json

 {
   "name": "apexcharts",
-  "version": "3.12.0",
+  "version": "3.13.0",
   "description": "A JavaScript Chart Library",
@@ -53,6 +53,4 @@ "repository": {
     "babel-plugin-istanbul": "6.0.0",
-    "chalk": "2.4.2",
-    "concurrently": "^3.5.1",
-    "cross-env": "5.2.0",
-    "css-loader": "3.4.0",
+    "chalk": "3.0.0",
+    "css-loader": "3.4.1",
     "eslint": "6.8.0",
@@ -72,2 +70,3 @@ "eslint-config-prettier": "6.9.0",
     "puppeteer": "2.0.0",
+    "puppeteer-cluster": "0.18.0",
     "@rollup/plugin-json": "4.0.1",
@@ -74,0 +73,0 @@ "@rollup/plugin-node-resolve": "6.0.0",

README.md

@@ -6,8 +6,10 @@ <p align="center"><img src="https://apexcharts.com/media/apexcharts-logo.png"></p>
   <a href="https://travis-ci.com/apexcharts/apexcharts.js"><img src="https://api.travis-ci.com/apexcharts/apexcharts.js.svg?branch=master" alt="build" /></a>
-  <img alt="downloads" src="https://img.shields.io/npm/dm/apexcharts.svg">
+  <img alt="downloads" src="https://img.shields.io/npm/dm/apexcharts.svg"/>
   <a href="https://www.npmjs.com/package/apexcharts"><img src="https://img.shields.io/npm/v/apexcharts.svg" alt="ver"></a>
-  <img alt="size" src="https://img.shields.io/bundlephobia/min/apexcharts.svg?label=size">
+  <img alt="size" src="https://badgen.net/bundlephobia/min/apexcharts?label=size">
+  <a href="https://cdn.jsdelivr.net/npm/apexcharts@3.12.0/types/apexcharts.d.ts"><img src="https://badgen.net/npm/types/apexcharts"/></a>
+  <a href="https://github.com/prettier/prettier"><img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square" alt="prettier"></a>
   <a href="https://www.jsdelivr.com/package/npm/apexcharts"><img src="https://data.jsdelivr.com/v1/package/npm/apexcharts/badge" alt="jsdelivr" /></a>
-  <a href="https://github.com/prettier/prettier"><img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square" alt="prettier"></a>
-  <a href="https://patreon.com/junedchhipa"><img src="https://img.shields.io/badge/patrons-10-blue.svg?style=flat&logo=patreon" alt="patrons" /></a>
+  <a href="https://codeclimate.com/github/apexcharts/apexcharts.js"><img src="https://badgen.net/codeclimate/maintainability/apexcharts/apexcharts.js" /></a>
+  <img src="https://badgen.net/codeclimate/tech-debt/apexcharts/apexcharts.js"/>
 </p>
@@ -204,3 +206,4 @@
 - [promise-polyfill](https://github.com/taylorhakes/promise-polyfill)
-- [classlist](https://github.com/eligrey/classList.js/)
+- [classlist.js](https://github.com/eligrey/classList.js/)
+- [blob.js](https://github.com/eligrey/Blob.js)
 
@@ -207,0 +210,0 @@ ## Development

src/apexcharts.js

@@ -12,3 +12,3 @@ import Annotations from './modules/annotations/Annotations'
 import Defaults from './modules/settings/Defaults'
-import Dimensions from './modules/Dimensions'
+import Dimensions from './modules/dimensions/Dimensions'
 import Formatters from './modules/Formatters'
@@ -18,3 +18,3 @@ import Exports from './modules/Exports'
 import Graphics from './modules/Graphics'
-import Legend from './modules/Legend'
+import Legend from './modules/legend/Legend'
 import Markers from './modules/Markers'
@@ -124,4 +124,2 @@ import Pie from './charts/Pie'
           .then(() => {
-            resolve(graphData)
-
             if (typeof this.w.config.chart.events.mounted === 'function') {
@@ -132,2 +130,3 @@ this.w.config.chart.events.mounted(this, this.w)
             this.fireEvent('mounted', [this, this.w])
+            resolve(graphData)
           })
@@ -232,3 +231,3 @@ .catch((e) => {
     gl.comboCharts = combo.comboCharts
-    gl.comboChartsHasBars = combo.comboChartsHasBars
+    gl.comboBarCount = combo.comboBarCount
 
@@ -328,3 +327,2 @@ if (
       }
-      me.annotations = new Annotations(me)
       me.axes.drawAxis(w.config.chart.type, graphData.xyRatios)
@@ -345,2 +343,3 @@
 
+      me.annotations = new Annotations(me)
       if (w.config.annotations.position === 'back') {
@@ -380,3 +379,6 @@ me.annotations.drawAnnotations()
 
-        if (w.globals.axisCharts && w.globals.isXNumeric) {
+        if (
+          w.globals.axisCharts &&
+          (w.globals.isXNumeric || w.config.xaxis.convertedCatToNumeric)
+        ) {
           if (
@@ -391,10 +393,2 @@ w.config.chart.zoom.enabled ||
           }
-        } else {
-          const tools = w.config.chart.toolbar.tools
-          tools.zoom = false
-          tools.zoomin = false
-          tools.zoomout = false
-          tools.selection = false
-          tools.pan = false
-          tools.reset = false
         }
@@ -893,2 +887,5 @@
       'toggleSeries',
+      'showSeries',
+      'hideSeries',
+      'setLocale',
       'resetSeries',
@@ -920,3 +917,3 @@ 'toggleDataPointSelection',
 
-    this.legend.toggleDataSeries(
+    this.legend.legendHelpers.toggleDataSeries(
       isSeriesHidden.realIndex,
@@ -933,3 +930,3 @@ isSeriesHidden.isHidden
     if (isSeriesHidden.isHidden) {
-      this.legend.toggleDataSeries(isSeriesHidden.realIndex, true)
+      this.legend.legendHelpers.toggleDataSeries(isSeriesHidden.realIndex, true)
     }
@@ -942,3 +939,6 @@ }
     if (!isSeriesHidden.isHidden) {
-      this.legend.toggleDataSeries(isSeriesHidden.realIndex, false)
+      this.legend.legendHelpers.toggleDataSeries(
+        isSeriesHidden.realIndex,
+        false
+      )
     }
@@ -999,6 +999,6 @@ }
         elMenu &&
-        elMenu.classList.contains('open') &&
+        elMenu.classList.contains('apexcharts-menu-open') &&
         target !== 'apexcharts-menu-icon'
       ) {
-        elMenu.classList.remove('open')
+        elMenu.classList.remove('apexcharts-menu-open')
       }
@@ -1169,3 +1169,6 @@ }
   parentResizeCallback() {
-    if (this.w.globals.animationEnded) {
+    if (
+      this.w.globals.animationEnded &&
+      this.w.config.chart.redrawOnParentResize
+    ) {
       this.windowResize()
@@ -1172,0 +1175,0 @@ }

src/charts/Bar.js

@@ -33,2 +33,3 @@ import BarDataLabels from './common/bar/DataLabels'
       this.xRatio = xyRatios.xRatio
+      this.initialXRatio = xyRatios.initialXRatio
       this.yRatio = xyRatios.yRatio
@@ -438,3 +439,3 @@ this.invertedXRatio = xyRatios.invertedXRatio
         (w.globals.seriesX[sxI][j] - w.globals.minX) / this.xRatio -
-        barWidth / 2
+        (barWidth * this.seriesLen) / 2
     }
@@ -441,0 +442,0 @@

src/charts/common/bar/DataLabels.js

@@ -389,3 +389,3 @@ import Graphics from '../../../modules/Graphics'
           barWidth =
-            w.globals.series[i][j] /
+            Math.abs(w.globals.series[i][j]) /
             this.barCtx.invertedYRatio[this.barCtx.yaxisIndex]
@@ -404,3 +404,4 @@
           barHeight =
-            w.globals.series[i][j] / this.barCtx.yRatio[this.barCtx.yaxisIndex]
+            Math.abs(w.globals.series[i][j]) /
+            this.barCtx.yRatio[this.barCtx.yaxisIndex]
           if (textRects.height / 1.6 > barHeight) {
@@ -407,0 +408,0 @@ text = ''

src/charts/common/bar/Helpers.js

@@ -15,3 +15,3 @@ import Fill from '../../../modules/Fill'
     this.barCtx.seriesLen = 0
-    this.barCtx.visibleI = -1
+    this.barCtx.visibleI = -1 // visible Series
     this.barCtx.visibleItems = 1 // number of visible bars after user zoomed in/out
@@ -78,2 +78,5 @@
       xDivision = w.globals.gridWidth / this.barCtx.visibleItems
+      if (w.config.xaxis.convertedCatToNumeric) {
+        xDivision = w.globals.gridWidth / w.globals.dataPoints
+      }
       barWidth =
@@ -86,5 +89,9 @@ ((xDivision / this.barCtx.seriesLen) *
         // max barwidth should be equal to minXDiff to avoid overlap
-        if (w.globals.minXDiff && w.globals.minXDiff / this.barCtx.xRatio > 0) {
-          xDivision = w.globals.minXDiff / this.barCtx.xRatio
+        let xRatio = this.barCtx.xRatio
+        if (w.config.xaxis.convertedCatToNumeric) {
+          xRatio = this.barCtx.initialXRatio
         }
+        if (w.globals.minXDiff && w.globals.minXDiff / xRatio > 0) {
+          xDivision = w.globals.minXDiff / xRatio
+        }
         barWidth =
@@ -91,0 +98,0 @@ ((xDivision / this.barCtx.seriesLen) *

src/charts/Line.js

@@ -8,2 +8,3 @@ import CoreUtils from '../modules/CoreUtils'
 import Utils from '../utils/Utils'
+import Helpers from './common/line/Helpers'
 
@@ -33,2 +34,6 @@ /**
 
+    this.lineHelpers = new Helpers(this)
+
+    this.prevSeriesY = []
+    this.categoryAxisCorrection = 0
     this.yaxisIndex = 0
@@ -39,9 +44,4 @@ }
     let w = this.w
-
     let graphics = new Graphics(this.ctx)
-    let fill = new Fill(this.ctx)
-    let dataLabels = new DataLabels(this.ctx)
-
     let type = w.globals.comboCharts ? ptype : w.config.chart.type
-
     let ret = graphics.group({
@@ -52,73 +52,33 @@ class: `apexcharts-${type}-series apexcharts-plot-series`
     const coreUtils = new CoreUtils(this.ctx, w)
+    this.yRatio = this.xyRatios.yRatio
+    this.zRatio = this.xyRatios.zRatio
+    this.xRatio = this.xyRatios.xRatio
+    this.baseLineY = this.xyRatios.baseLineY
+
     series = coreUtils.getLogSeries(series)
+    this.yRatio = coreUtils.getLogYRatios(this.yRatio)
 
-    let yRatio = this.xyRatios.yRatio
-
-    yRatio = coreUtils.getLogYRatios(yRatio)
-
-    let zRatio = this.xyRatios.zRatio
-    let xRatio = this.xyRatios.xRatio
-    let baseLineY = this.xyRatios.baseLineY
-
     // push all series in an array, so we can draw in reverse order (for stacked charts)
     let allSeries = []
 
-    let prevSeriesY = []
-
-    let categoryAxisCorrection = 0
-
     for (let i = 0; i < series.length; i++) {
-      // width divided into equal parts
+      series = this.lineHelpers.sameValueSeriesFix(i, series)
 
-      if (
-        type === 'line' &&
-        (w.config.fill.type === 'gradient' ||
-          w.config.fill.type[i] === 'gradient')
-      ) {
-        // a small adjustment to allow gradient line to draw correctly for all same values
-        /* #fix https://github.com/apexcharts/apexcharts.js/issues/358 */
-        if (coreUtils.seriesHaveSameValues(i)) {
-          let gSeries = series[i].slice()
-          gSeries[gSeries.length - 1] = gSeries[gSeries.length - 1] + 0.000001
-          series[i] = gSeries
-        }
-      }
-
-      let xDivision = w.globals.gridWidth / w.globals.dataPoints
       let realIndex = w.globals.comboCharts ? seriesIndex[i] : i
 
-      const strokeWidth = Array.isArray(w.config.stroke.width)
-        ? w.config.stroke.width[realIndex]
-        : w.config.stroke.width
+      this._initSerieVariables(series, i, realIndex)
 
-      if (yRatio.length > 1) {
-        this.yaxisIndex = realIndex
-      }
-
-      this.isReversed =
-        w.config.yaxis[this.yaxisIndex] &&
-        w.config.yaxis[this.yaxisIndex].reversed
-
       let yArrj = [] // hold y values of current iterating series
       let xArrj = [] // hold x values of current iterating series
 
-      // zeroY is the 0 value in y series which can be used in negative charts
-      let zeroY =
-        w.globals.gridHeight -
-        baseLineY[this.yaxisIndex] -
-        (this.isReversed ? w.globals.gridHeight : 0) +
-        (this.isReversed ? baseLineY[this.yaxisIndex] * 2 : 0)
+      let x = w.globals.padHorizontal + this.categoryAxisCorrection
+      let y = 1
 
-      let areaBottomY = zeroY
-      if (zeroY > w.globals.gridHeight) {
-        areaBottomY = w.globals.gridHeight
-      }
+      let linePaths = []
+      let areaPaths = []
 
-      categoryAxisCorrection = xDivision / 2
+      this.ctx.series.addCollapsedClassToSeries(this.elSeries, realIndex)
 
-      let x = w.globals.padHorizontal + categoryAxisCorrection
-      let y = 1
-
       if (w.globals.isXNumeric && w.globals.seriesX.length > 0) {
-        x = (w.globals.seriesX[realIndex][0] - w.globals.minX) / xRatio
+        x = (w.globals.seriesX[realIndex][0] - w.globals.minX) / this.xRatio
       }
@@ -128,50 +88,13 @@
 
-      let linePath, areaPath, pathFromLine, pathFromArea
-
-      let linePaths = []
-      let areaPaths = []
-
-      // el to which series will be drawn
-      let elSeries = graphics.group({
-        class: `apexcharts-series`,
-        seriesName: Utils.escapeString(w.globals.seriesNames[realIndex])
-      })
-
-      // points
-      let elPointsMain = graphics.group({
-        class: 'apexcharts-series-markers-wrap'
-      })
-
-      // eldatalabels
-      let elDataLabelsWrap = graphics.group({
-        class: 'apexcharts-datalabels'
-      })
-
-      this.ctx.series.addCollapsedClassToSeries(elSeries, realIndex)
-
-      let longestSeries = series[i].length === w.globals.dataPoints
-      elSeries.attr({
-        'data:longestSeries': longestSeries,
-        rel: i + 1,
-        'data:realIndex': realIndex
-      })
-
-      this.appendPathFrom = true
-
       let pX = x
       let pY
-
       let prevX = pX
-      let prevY = zeroY // w.globals.svgHeight;
-
+      let prevY = this.zeroY
       let lineYPosition = 0
 
       // the first value in the current series is not null or undefined
-      let firstPrevY = this.determineFirstPrevY({
+      let firstPrevY = this.lineHelpers.determineFirstPrevY({
         i,
         series,
-        yRatio: yRatio[this.yaxisIndex],
-        zeroY,
         prevY,
-        prevSeriesY,
         lineYPosition
@@ -184,252 +107,391 @@ })
 
-      if (series[i][0] === null) {
-        // when the first value itself is null, we need to move the pointer to a location where a null value is not found
-        for (let s = 0; s < series[i].length; s++) {
-          if (series[i][s] !== null) {
-            prevX = xDivision * s
-            prevY = zeroY - series[i][s] / yRatio[this.yaxisIndex]
-            linePath = graphics.move(prevX, prevY)
-            areaPath = graphics.move(prevX, areaBottomY)
-            break
-          }
-        }
-      } else {
-        linePath = graphics.move(prevX, prevY)
-        areaPath =
-          graphics.move(prevX, areaBottomY) + graphics.line(prevX, prevY)
-      }
+      let pathsFrom = this._calculatePathsFrom({
+        series,
+        i,
+        realIndex,
+        prevX,
+        prevY
+      })
 
-      pathFromLine = graphics.move(-1, zeroY) + graphics.line(-1, zeroY)
-      pathFromArea = graphics.move(-1, zeroY) + graphics.line(-1, zeroY)
+      let paths = this._iterateOverDataPoints({
+        series,
+        realIndex,
+        i,
+        x,
+        y,
+        pX,
+        pY,
+        pathsFrom,
+        linePaths,
+        areaPaths,
+        seriesIndex,
+        lineYPosition,
+        xArrj,
+        yArrj
+      })
 
-      if (w.globals.previousPaths.length > 0) {
-        const pathFrom = this.checkPreviousPaths({
-          pathFromLine,
-          pathFromArea,
-          realIndex
-        })
-        pathFromLine = pathFrom.pathFromLine
-        pathFromArea = pathFrom.pathFromArea
-      }
+      this._handlePaths({ type, realIndex, i, paths })
 
-      const iterations =
-        w.globals.dataPoints > 1
-          ? w.globals.dataPoints - 1
-          : w.globals.dataPoints
-      for (let j = 0; j < iterations; j++) {
-        const isNull =
-          typeof series[i][j + 1] === 'undefined' || series[i][j + 1] === null
+      this.elSeries.add(this.elPointsMain)
+      this.elSeries.add(this.elDataLabelsWrap)
 
-        if (w.globals.isXNumeric) {
-          let sX = w.globals.seriesX[realIndex][j + 1]
-          if (typeof w.globals.seriesX[realIndex][j + 1] === 'undefined') {
-            /* fix #374 */
-            sX = w.globals.seriesX[realIndex][iterations - 1]
-          }
-          x = (sX - w.globals.minX) / xRatio
-        } else {
-          x = x + xDivision
-        }
+      allSeries.push(this.elSeries)
+    }
 
-        const minY = Utils.isNumber(w.globals.minYArr[realIndex])
-          ? w.globals.minYArr[realIndex]
-          : w.globals.minY
+    for (let s = allSeries.length; s > 0; s--) {
+      ret.add(allSeries[s - 1])
+    }
 
-        if (w.config.chart.stacked) {
-          if (
-            i > 0 &&
-            w.globals.collapsedSeries.length < w.config.series.length - 1
-          ) {
-            lineYPosition = prevSeriesY[i - 1][j + 1]
-          } else {
-            // the first series will not have prevY values
-            lineYPosition = zeroY
-          }
-        } else {
-          lineYPosition = zeroY
-        }
+    return ret
+  }
 
-        if (isNull) {
-          y =
-            lineYPosition -
-            minY / yRatio[this.yaxisIndex] +
-            (this.isReversed ? minY / yRatio[this.yaxisIndex] : 0) * 2
-        } else {
-          y =
-            lineYPosition -
-            series[i][j + 1] / yRatio[this.yaxisIndex] +
-            (this.isReversed ? series[i][j + 1] / yRatio[this.yaxisIndex] : 0) *
-              2
-        }
+  _initSerieVariables(series, i, realIndex) {
+    const w = this.w
+    const graphics = new Graphics(this.ctx)
 
-        // push current X
-        xArrj.push(x)
+    // width divided into equal parts
+    this.xDivision =
+      w.globals.gridWidth /
+      (w.globals.dataPoints - (w.config.xaxis.tickPlacement === 'on' ? 1 : 0))
 
-        // push current Y that will be used as next series's bottom position
-        yArrj.push(y)
+    this.strokeWidth = Array.isArray(w.config.stroke.width)
+      ? w.config.stroke.width[realIndex]
+      : w.config.stroke.width
 
-        let calculatedPaths = this.createPaths({
-          series,
-          i,
-          j,
-          x,
-          y,
-          xDivision,
-          pX,
-          pY,
-          areaBottomY,
-          linePath,
-          areaPath,
-          linePaths,
-          areaPaths,
-          seriesIndex
-        })
+    if (this.yRatio.length > 1) {
+      this.yaxisIndex = realIndex
+    }
 
-        areaPaths = calculatedPaths.areaPaths
-        linePaths = calculatedPaths.linePaths
-        pX = calculatedPaths.pX
-        pY = calculatedPaths.pY
-        areaPath = calculatedPaths.areaPath
-        linePath = calculatedPaths.linePath
+    this.isReversed =
+      w.config.yaxis[this.yaxisIndex] &&
+      w.config.yaxis[this.yaxisIndex].reversed
 
-        if (this.appendPathFrom) {
-          pathFromLine = pathFromLine + graphics.line(x, zeroY)
-          pathFromArea = pathFromArea + graphics.line(x, zeroY)
-        }
+    // zeroY is the 0 value in y series which can be used in negative charts
+    this.zeroY =
+      w.globals.gridHeight -
+      this.baseLineY[this.yaxisIndex] -
+      (this.isReversed ? w.globals.gridHeight : 0) +
+      (this.isReversed ? this.baseLineY[this.yaxisIndex] * 2 : 0)
 
-        let pointsPos = this.calculatePoints({
-          series,
-          x,
-          y,
-          realIndex,
-          i,
-          j,
-          prevY,
-          categoryAxisCorrection,
-          xRatio
-        })
+    this.areaBottomY = this.zeroY
+    if (this.zeroY > w.globals.gridHeight) {
+      this.areaBottomY = w.globals.gridHeight
+    }
 
-        if (!this.pointsChart) {
-          let markers = new Markers(this.ctx)
-          if (w.globals.dataPoints > 1) {
-            elPointsMain.node.classList.add('hidden')
-          }
+    this.categoryAxisCorrection = this.xDivision / 2
 
-          let elPointsWrap = markers.plotChartMarkers(
-            pointsPos,
-            realIndex,
-            j + 1
-          )
-          if (elPointsWrap !== null) {
-            elPointsMain.add(elPointsWrap)
-          }
-        } else {
-          // scatter / bubble chart points creation
-          this.scatter.draw(elSeries, j, {
-            realIndex,
-            pointsPos,
-            zRatio,
-            elParent: elPointsMain
-          })
-        }
+    // el to which series will be drawn
+    this.elSeries = graphics.group({
+      class: `apexcharts-series`,
+      seriesName: Utils.escapeString(w.globals.seriesNames[realIndex])
+    })
 
-        let drawnLabels = dataLabels.drawDataLabel(
-          pointsPos,
-          realIndex,
-          j + 1,
-          null,
-          strokeWidth
-        )
-        if (drawnLabels !== null) {
-          elDataLabelsWrap.add(drawnLabels)
+    // points
+    this.elPointsMain = graphics.group({
+      class: 'apexcharts-series-markers-wrap'
+    })
+
+    // eldatalabels
+    this.elDataLabelsWrap = graphics.group({
+      class: 'apexcharts-datalabels'
+    })
+
+    let longestSeries = series[i].length === w.globals.dataPoints
+    this.elSeries.attr({
+      'data:longestSeries': longestSeries,
+      rel: i + 1,
+      'data:realIndex': realIndex
+    })
+
+    this.appendPathFrom = true
+  }
+
+  _calculatePathsFrom({ series, i, realIndex, prevX, prevY }) {
+    const w = this.w
+    const graphics = new Graphics(this.ctx)
+    let linePath, areaPath, pathFromLine, pathFromArea
+
+    if (series[i][0] === null) {
+      // when the first value itself is null, we need to move the pointer to a location where a null value is not found
+      for (let s = 0; s < series[i].length; s++) {
+        if (series[i][s] !== null) {
+          prevX = this.xDivision * s
+          prevY = this.zeroY - series[i][s] / this.yRatio[this.yaxisIndex]
+          linePath = graphics.move(prevX, prevY)
+          areaPath = graphics.move(prevX, this.areaBottomY)
+          break
         }
       }
+    } else {
+      linePath = graphics.move(prevX, prevY)
+      areaPath =
+        graphics.move(prevX, this.areaBottomY) + graphics.line(prevX, prevY)
+    }
 
-      // push all current y values array to main PrevY Array
-      prevSeriesY.push(yArrj)
+    pathFromLine = graphics.move(-1, this.zeroY) + graphics.line(-1, this.zeroY)
+    pathFromArea = graphics.move(-1, this.zeroY) + graphics.line(-1, this.zeroY)
 
-      // push all x val arrays into main xArr
-      w.globals.seriesXvalues[realIndex] = xArrj
-      w.globals.seriesYvalues[realIndex] = yArrj
+    if (w.globals.previousPaths.length > 0) {
+      const pathFrom = this.lineHelpers.checkPreviousPaths({
+        pathFromLine,
+        pathFromArea,
+        realIndex
+      })
+      pathFromLine = pathFrom.pathFromLine
+      pathFromArea = pathFrom.pathFromArea
+    }
 
-      // these elements will be shown after area path animation completes
-      if (!this.pointsChart) {
-        w.globals.delayedElements.push({
-          el: elPointsMain.node,
-          index: realIndex
+    return {
+      prevX,
+      prevY,
+      linePath,
+      areaPath,
+      pathFromLine,
+      pathFromArea
+    }
+  }
+
+  _handlePaths({ type, realIndex, i, paths }) {
+    const w = this.w
+    const graphics = new Graphics(this.ctx)
+    const fill = new Fill(this.ctx)
+
+    // push all current y values array to main PrevY Array
+    this.prevSeriesY.push(paths.yArrj)
+
+    // push all x val arrays into main xArr
+    w.globals.seriesXvalues[realIndex] = paths.xArrj
+    w.globals.seriesYvalues[realIndex] = paths.yArrj
+
+    // these elements will be shown after area path animation completes
+    if (!this.pointsChart) {
+      w.globals.delayedElements.push({
+        el: this.elPointsMain.node,
+        index: realIndex
+      })
+    }
+
+    const defaultRenderedPathOptions = {
+      i,
+      realIndex,
+      animationDelay: i,
+      initialSpeed: w.config.chart.animations.speed,
+      dataChangeSpeed: w.config.chart.animations.dynamicAnimation.speed,
+      className: `apexcharts-${type}`
+    }
+
+    if (type === 'area') {
+      let pathFill = fill.fillPath({
+        seriesNumber: realIndex
+      })
+
+      for (let p = 0; p < paths.areaPaths.length; p++) {
+        let renderedPath = graphics.renderPaths({
+          ...defaultRenderedPathOptions,
+          pathFrom: paths.pathFromArea,
+          pathTo: paths.areaPaths[p],
+          stroke: 'none',
+          strokeWidth: 0,
+          strokeLineCap: null,
+          fill: pathFill
         })
+
+        this.elSeries.add(renderedPath)
       }
+    }
 
-      const defaultRenderedPathOptions = {
-        i,
-        realIndex,
-        animationDelay: i,
-        initialSpeed: w.config.chart.animations.speed,
-        dataChangeSpeed: w.config.chart.animations.dynamicAnimation.speed,
-        className: `apexcharts-${type}`
+    if (w.config.stroke.show && !this.pointsChart) {
+      let lineFill = null
+      if (type === 'line') {
+        // fillable lines only for lineChart
+        lineFill = fill.fillPath({
+          seriesNumber: realIndex,
+          i
+        })
+      } else {
+        lineFill = w.globals.stroke.colors[realIndex]
       }
 
-      if (type === 'area') {
-        let pathFill = fill.fillPath({
-          seriesNumber: realIndex
+      for (let p = 0; p < paths.linePaths.length; p++) {
+        let renderedPath = graphics.renderPaths({
+          ...defaultRenderedPathOptions,
+          pathFrom: paths.pathFromLine,
+          pathTo: paths.linePaths[p],
+          stroke: lineFill,
+          strokeWidth: this.strokeWidth,
+          strokeLineCap: w.config.stroke.lineCap,
+          fill: 'none'
         })
 
-        for (let p = 0; p < areaPaths.length; p++) {
-          let renderedPath = graphics.renderPaths({
-            ...defaultRenderedPathOptions,
-            pathFrom: pathFromArea,
-            pathTo: areaPaths[p],
-            stroke: 'none',
-            strokeWidth: 0,
-            strokeLineCap: null,
-            fill: pathFill
-          })
+        this.elSeries.add(renderedPath)
+      }
+    }
+  }
 
-          elSeries.add(renderedPath)
+  _iterateOverDataPoints({
+    series,
+    realIndex,
+    i,
+    x,
+    y,
+    pX,
+    pY,
+    pathsFrom,
+    linePaths,
+    areaPaths,
+    seriesIndex,
+    lineYPosition,
+    xArrj,
+    yArrj
+  }) {
+    const w = this.w
+    let graphics = new Graphics(this.ctx)
+    let yRatio = this.yRatio
+    let { prevY, linePath, areaPath, pathFromLine, pathFromArea } = pathsFrom
+
+    const minY = Utils.isNumber(w.globals.minYArr[realIndex])
+      ? w.globals.minYArr[realIndex]
+      : w.globals.minY
+
+    const iterations =
+      w.globals.dataPoints > 1 ? w.globals.dataPoints - 1 : w.globals.dataPoints
+
+    for (let j = 0; j < iterations; j++) {
+      const isNull =
+        typeof series[i][j + 1] === 'undefined' || series[i][j + 1] === null
+
+      if (w.globals.isXNumeric) {
+        let sX = w.globals.seriesX[realIndex][j + 1]
+        if (typeof w.globals.seriesX[realIndex][j + 1] === 'undefined') {
+          /* fix #374 */
+          sX = w.globals.seriesX[realIndex][iterations - 1]
         }
+        x = (sX - w.globals.minX) / this.xRatio
+      } else {
+        x = x + this.xDivision
       }
 
-      if (w.config.stroke.show && !this.pointsChart) {
-        let lineFill = null
-        if (type === 'line') {
-          // fillable lines only for lineChart
-          lineFill = fill.fillPath({
-            seriesNumber: realIndex,
-            i
-          })
+      if (w.config.chart.stacked) {
+        if (
+          i > 0 &&
+          w.globals.collapsedSeries.length < w.config.series.length - 1
+        ) {
+          lineYPosition = this.prevSeriesY[i - 1][j + 1]
         } else {
-          lineFill = w.globals.stroke.colors[realIndex]
+          // the first series will not have prevY values
+          lineYPosition = this.zeroY
         }
+      } else {
+        lineYPosition = this.zeroY
+      }
 
-        for (let p = 0; p < linePaths.length; p++) {
-          let renderedPath = graphics.renderPaths({
-            ...defaultRenderedPathOptions,
-            pathFrom: pathFromLine,
-            pathTo: linePaths[p],
-            stroke: lineFill,
-            strokeWidth,
-            strokeLineCap: w.config.stroke.lineCap,
-            fill: 'none'
-          })
+      if (isNull) {
+        y =
+          lineYPosition -
+          minY / yRatio[this.yaxisIndex] +
+          (this.isReversed ? minY / yRatio[this.yaxisIndex] : 0) * 2
+      } else {
+        y =
+          lineYPosition -
+          series[i][j + 1] / yRatio[this.yaxisIndex] +
+          (this.isReversed ? series[i][j + 1] / yRatio[this.yaxisIndex] : 0) * 2
+      }
 
-          elSeries.add(renderedPath)
-        }
+      // push current X
+      xArrj.push(x)
+
+      // push current Y that will be used as next series's bottom position
+      yArrj.push(y)
+
+      let calculatedPaths = this._createPaths({
+        series,
+        i,
+        realIndex,
+        j,
+        x,
+        y,
+        pX,
+        pY,
+        linePath,
+        areaPath,
+        linePaths,
+        areaPaths,
+        seriesIndex
+      })
+
+      areaPaths = calculatedPaths.areaPaths
+      linePaths = calculatedPaths.linePaths
+      pX = calculatedPaths.pX
+      pY = calculatedPaths.pY
+      areaPath = calculatedPaths.areaPath
+      linePath = calculatedPaths.linePath
+
+      if (this.appendPathFrom) {
+        pathFromLine = pathFromLine + graphics.line(x, this.zeroY)
+        pathFromArea = pathFromArea + graphics.line(x, this.zeroY)
       }
 
-      elSeries.add(elPointsMain)
-      elSeries.add(elDataLabelsWrap)
+      this._handleMarkersAndLabels({ series, x, y, prevY, i, j, realIndex })
+    }
 
-      allSeries.push(elSeries)
+    return {
+      yArrj,
+      xArrj,
+      pathFromArea,
+      areaPaths,
+      pathFromLine,
+      linePaths
     }
+  }
 
-    for (let s = allSeries.length; s > 0; s--) {
-      ret.add(allSeries[s - 1])
+  _handleMarkersAndLabels({ series, x, y, prevY, i, j, realIndex }) {
+    const w = this.w
+    let dataLabels = new DataLabels(this.ctx)
+
+    let pointsPos = this.lineHelpers.calculatePoints({
+      series,
+      x,
+      y,
+      realIndex,
+      i,
+      j,
+      prevY
+    })
+
+    if (!this.pointsChart) {
+      let markers = new Markers(this.ctx)
+      if (w.globals.series[i].length > 1) {
+        this.elPointsMain.node.classList.add('apexcharts-element-hidden')
+      }
+
+      let elPointsWrap = markers.plotChartMarkers(pointsPos, realIndex, j + 1)
+      if (elPointsWrap !== null) {
+        this.elPointsMain.add(elPointsWrap)
+      }
+    } else {
+      // scatter / bubble chart points creation
+      this.scatter.draw(this.elSeries, j, {
+        realIndex,
+        pointsPos,
+        zRatio: this.zRatio,
+        elParent: this.elPointsMain
+      })
     }
 
-    return ret
+    let drawnLabels = dataLabels.drawDataLabel(
+      pointsPos,
+      realIndex,
+      j + 1,
+      null,
+      this.strokeWidth
+    )
+    if (drawnLabels !== null) {
+      this.elDataLabelsWrap.add(drawnLabels)
+    }
   }
 
-  createPaths({
+  _createPaths({
     series,
     i,
+    realIndex,
     j,
@@ -440,4 +502,2 @@ x,
     pY,
-    xDivision,
-    areaBottomY,
     linePath,
@@ -453,2 +513,3 @@ areaPath,
     let curve = w.config.stroke.curve
+    const areaBottomY = this.areaBottomY
 
@@ -512,6 +573,11 @@ if (Array.isArray(w.config.stroke.curve)) {
         linePath = linePath + graphics.move(x, y)
+
+        const numericOrCatX = w.globals.isXNumeric
+          ? (w.globals.seriesX[realIndex][j] - w.globals.minX) / this.xRatio
+          : x - this.xDivision
         areaPath =
           areaPath +
-          graphics.line(x - xDivision, areaBottomY) +
-          graphics.move(x, y)
+          graphics.line(numericOrCatX, areaBottomY) +
+          graphics.move(x, y) +
+          'z'
       }
@@ -551,138 +617,4 @@ if (series[i][j] === null) {
   }
-
-  calculatePoints(opts) {
-    let {
-      series,
-      realIndex,
-      x,
-      y,
-      i,
-      j,
-      prevY,
-      categoryAxisCorrection,
-      xRatio
-    } = opts
-
-    let w = this.w
-
-    let ptX = []
-    let ptY = []
-
-    if (j === 0) {
-      let xPT1st = 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) / xRatio +
-          w.config.markers.offsetX
-      }
-
-      // push 2 points for the first data values
-      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 = {
-      x: ptX,
-      y: ptY
-    }
-
-    return pointsPos
-  }
-
-  checkPreviousPaths({ pathFromLine, pathFromArea, realIndex }) {
-    let w = this.w
-
-    for (let pp = 0; pp < w.globals.previousPaths.length; pp++) {
-      let gpp = w.globals.previousPaths[pp]
-
-      if (
-        (gpp.type === 'line' || gpp.type === 'area') &&
-        gpp.paths.length > 0 &&
-        parseInt(gpp.realIndex, 10) === parseInt(realIndex, 10)
-      ) {
-        if (gpp.type === 'line') {
-          this.appendPathFrom = false
-          pathFromLine = w.globals.previousPaths[pp].paths[0].d
-        } else if (gpp.type === 'area') {
-          this.appendPathFrom = false
-          pathFromArea = w.globals.previousPaths[pp].paths[0].d
-
-          if (w.config.stroke.show) {
-            pathFromLine = w.globals.previousPaths[pp].paths[1].d
-          }
-        }
-      }
-    }
-
-    return {
-      pathFromLine,
-      pathFromArea
-    }
-  }
-
-  determineFirstPrevY({
-    i,
-    series,
-    yRatio,
-    zeroY,
-    prevY,
-    prevSeriesY,
-    lineYPosition
-  }) {
-    let w = this.w
-    if (typeof series[i][0] !== 'undefined') {
-      if (w.config.chart.stacked) {
-        if (i > 0) {
-          // 1st y value of previous series
-          lineYPosition = prevSeriesY[i - 1][0]
-        } else {
-          // the first series will not have prevY values
-          lineYPosition = zeroY
-        }
-      } else {
-        lineYPosition = zeroY
-      }
-      prevY =
-        lineYPosition -
-        series[i][0] / yRatio +
-        (this.isReversed ? series[i][0] / yRatio : 0) * 2
-    } else {
-      // the first value in the current series is null
-      if (
-        w.config.chart.stacked &&
-        i > 0 &&
-        typeof series[i][0] === 'undefined'
-      ) {
-        // check for undefined value (undefined value will occur when we clear the series while user clicks on legend to hide serieses)
-        for (let s = i - 1; s >= 0; s--) {
-          // for loop to get to 1st previous value until we get it
-          if (series[s][0] !== null && typeof series[s][0] !== 'undefined') {
-            lineYPosition = prevSeriesY[s][0]
-            prevY = lineYPosition
-            break
-          }
-        }
-      }
-    }
-    return {
-      prevY,
-      lineYPosition
-    }
-  }
 }
 
 export default Line

src/charts/Pie.js

@@ -52,2 +52,3 @@ import Animations from '../modules/Animations'
     if (w.config.plotOptions.pie.size !== undefined) {
+      // TODO: deprecate this property as it causes more issues than being helpful
       w.globals.radialSize = w.config.plotOptions.pie.size
@@ -286,2 +287,3 @@ }
 
+        if (dur === 0) dur = 1
         this.animDur = dur + this.animDur
@@ -705,2 +707,4 @@ this.animBeginArr.push(this.animDur)
 
+    name = dataLabelsConfig.name.formatter(name, true, w)
+
     if (dataLabelsConfig.name.show) {
@@ -782,2 +786,5 @@ let elLabel = graphics.drawText({
 
+    const isTotal = name === labelsConfig.total.label
+    name = labelsConfig.name.formatter(name, isTotal, w)
+
     if (elLabel !== null) {
@@ -784,0 +791,0 @@ elLabel.textContent = name

src/charts/Radar.js

@@ -138,3 +138,3 @@ import Fill from '../modules/Fill'
       elPointsMain = this.graphics.group({
-        class: 'apexcharts-series-markers-wrap hidden'
+        class: 'apexcharts-series-markers-wrap apexcharts-element-hidden'
       })
@@ -141,0 +141,0 @@

src/charts/Radial.js

@@ -69,2 +69,3 @@ import Pie from './Pie'
     if (w.config.plotOptions.radialBar.size !== undefined) {
+      // TODO: deprecate this property as it causes more issues than being helpful
       size = w.config.plotOptions.radialBar.size
@@ -71,0 +72,0 @@ }

src/charts/Scatter.js

@@ -144,3 +144,14 @@ import Animations from '../modules/Animations'
       }
-      anim.animateCircleRadius(circle, 0, finishRadius, speed, w.globals.easing)
+      anim.animateCircleRadius(
+        circle,
+        0,
+        finishRadius,
+        speed,
+        w.globals.easing,
+        () => {
+          window.setTimeout(() => {
+            anim.animationCompleted(circle)
+          }, 100)
+        }
+      )
     }
@@ -147,0 +158,0 @@

src/modules/Animations.js

@@ -94,3 +94,3 @@ import Utils from '../utils/Utils'
    */
-  animateCircleRadius(el, from, to, speed, easing) {
+  animateCircleRadius(el, from, to, speed, easing, cb) {
     if (!from) from = 0
@@ -105,2 +105,5 @@
       })
+      .afterAll(() => {
+        cb()
+      })
   }
@@ -136,3 +139,3 @@
   animatePathsGradually(params) {
-    let { el, j, pathFrom, pathTo, speed, delay } = params
+    let { el, realIndex, j, fill, pathFrom, pathTo, speed, delay } = params
 
@@ -155,3 +158,14 @@ let me = this
 
-    me.morphSVG(el, j, pathFrom, pathTo, speed, delay * delayFactor)
+    me.morphSVG(
+      el,
+      realIndex,
+      j,
+      w.config.chart.type === 'line' && !w.globals.comboCharts
+        ? 'stroke'
+        : fill,
+      pathFrom,
+      pathTo,
+      speed,
+      delay * delayFactor
+    )
   }
@@ -162,3 +176,3 @@
       const ele = d.el
-      ele.classList.remove('hidden')
+      ele.classList.remove('apexcharts-element-hidden')
     })
@@ -169,2 +183,4 @@ }
     const w = this.w
+    if (w.globals.animationEnded) return
+
     w.globals.animationEnded = true
@@ -178,3 +194,3 @@
   // SVG.js animation for morphing one path to another
-  morphSVG(el, j, pathFrom, pathTo, speed, delay) {
+  morphSVG(el, realIndex, j, fill, pathFrom, pathTo, speed, delay) {
     let w = this.w
@@ -221,4 +237,10 @@
           }
-        } else if (w.globals.shouldAnimate) {
-          this.animationCompleted(el)
+        } else if (fill !== 'none' && w.globals.shouldAnimate) {
+          if (
+            (!w.globals.comboCharts &&
+              realIndex === w.globals.series.length - 1) ||
+            w.globals.comboCharts
+          ) {
+            this.animationCompleted(el)
+          }
         }
@@ -225,0 +247,0 @@

src/modules/annotations/Annotations.js

@@ -63,3 +63,3 @@ import Graphics from '../../modules/Graphics'
           ) {
-            annoElArray[i].classList.add('hidden')
+            annoElArray[i].classList.add('apexcharts-element-hidden')
           }
@@ -66,0 +66,0 @@ }

src/modules/annotations/Helpers.js

@@ -0,1 +1,3 @@
+import CoreUtils from '../CoreUtils'
+
 export default class Helpers {
@@ -124,9 +126,7 @@ constructor(annoCtx) {
     let rX = x
-    let labels = w.globals.labels.slice()
 
-    if (w.config.xaxis.convertedCatToNumeric) {
-      labels = labels.map((i) => {
-        return w.config.xaxis.labels.formatter(i)
-      })
-    }
+    const coreUtils = new CoreUtils(this.annoCtx.ctx)
+    // w.globals.labels is changed at this point for xaxis.convertedCatToNumeric, hence passing is as param instead of directly getting in the getCategoryLabels function
+    let labels = coreUtils.getCategoryLabels(w.globals.labels)
+
     let catIndex = labels.indexOf(x)
@@ -133,0 +133,0 @@ const xLabel = w.globals.dom.baseEl.querySelector(

src/modules/annotations/PointsAnnotations.js

@@ -22,9 +22,8 @@ export default class PointAnnotations {
       let catIndex = w.globals.labels.indexOf(anno.x)
-      const xLabel = w.globals.dom.baseEl.querySelector(
-        '.apexcharts-xaxis-texts-g text:nth-child(' + (catIndex + 1) + ')'
-      )
 
-      const xPos = parseFloat(xLabel.getAttribute('x'))
+      if (w.config.xaxis.convertedCatToNumeric) {
+        catIndex = w.globals.categoryLabels.indexOf(anno.x)
+      }
 
-      x = xPos
+      x = this.annoCtx.helpers.getStringX(anno.x)
 
@@ -31,0 +30,0 @@ let annoY = anno.y

src/modules/annotations/YAxisAnnotations.js

@@ -17,2 +17,5 @@ export default class YAnnotations {
       let catIndex = w.globals.labels.indexOf(anno.y)
+      if (w.config.xaxis.convertedCatToNumeric) {
+        catIndex = w.globals.categoryLabels.indexOf(anno.y)
+      }
       const xLabel = w.globals.dom.baseEl.querySelector(
@@ -59,2 +62,5 @@ '.apexcharts-yaxis-texts-g text:nth-child(' + (catIndex + 1) + ')'
         let catIndex = w.globals.labels.indexOf(anno.y2)
+        if (w.config.xaxis.convertedCatToNumeric) {
+          catIndex = w.globals.categoryLabels.indexOf(anno.y2)
+        }
         const xLabel = w.globals.dom.baseEl.querySelector(
@@ -61,0 +67,0 @@ '.apexcharts-yaxis-texts-g text:nth-child(' + (catIndex + 1) + ')'

src/modules/axes/AxesUtils.js

@@ -14,3 +14,3 @@ import Formatters from '../Formatters'
     let rawLabel = typeof labels[i] === 'undefined' ? '' : labels[i]
-    let label
+    let label = rawLabel
 
@@ -58,9 +58,11 @@ let xlbFormatter = w.globals.xLabelFormatter
 
-    label = label.toString()
+    label = Array.isArray(label) ? label : label.toString()
 
     if (
-      label.indexOf('NaN') === 0 ||
-      label.toLowerCase().indexOf('invalid') === 0 ||
-      label.toLowerCase().indexOf('infinity') >= 0 ||
-      (drawnLabels.indexOf(label) >= 0 && !w.config.xaxis.labels.showDuplicates)
+      !Array.isArray(label) &&
+      (label.indexOf('NaN') === 0 ||
+        label.toLowerCase().indexOf('invalid') === 0 ||
+        label.toLowerCase().indexOf('infinity') >= 0 ||
+        (drawnLabels.indexOf(label) >= 0 &&
+          !w.config.xaxis.labels.showDuplicates))
     ) {
@@ -77,2 +79,36 @@ label = ''
 
+  checkForCroppedLabels(i, label, labelsLen) {
+    const w = this.w
+
+    if (i === 0) {
+      // check if first label is being cropped
+      if (
+        w.globals.skipFirstTimelinelabel &&
+        !w.config.xaxis.convertedCatToNumeric
+      ) {
+        label.text = ''
+      }
+    }
+
+    if (i === labelsLen - 1) {
+      // check if last label is being cropped
+      if (
+        w.globals.skipLastTimelinelabel &&
+        !w.config.xaxis.convertedCatToNumeric
+      ) {
+        label.text = ''
+      }
+    }
+
+    return label
+  }
+
+  checkForReversedLabels(i, labels) {
+    const w = this.w
+    if (w.config.yaxis[i] && w.config.yaxis[i].reversed) {
+      labels.reverse()
+    }
+    return labels
+  }
+
   drawYAxisTicks(
@@ -79,0 +115,0 @@ x,

src/modules/axes/Grid.js

 import CoreUtils from '../CoreUtils'
 import Graphics from '../Graphics'
 import XAxis from './XAxis'
+import AxesUtils from './AxesUtils'
 
@@ -18,2 +19,3 @@ /**
     this.xaxisLabels = w.globals.labels.slice()
+    this.axesUtils = new AxesUtils(ctx)
 
@@ -30,3 +32,3 @@ this.isTimelineBar =
 
-  // .when using sparklines or when showing no grid, we need to have a grid area which is reused at many places for other calculations as well
+  // when using sparklines or when showing no grid, we need to have a grid area which is reused at many places for other calculations as well
   drawGridArea(elGrid = null) {
@@ -107,6 +109,23 @@ let w = this.w
 
+    // let barHalfWidth = 0
+
+    const type = w.config.chart.type
+    const hasBar =
+      type === 'bar' || type === 'rangeBar' || w.globals.comboBarCount > 0
+
+    let barWidthLeft = 0
+    let barWidthRight = 0
+    if (hasBar && w.globals.isXNumeric && !w.globals.isBarHorizontal) {
+      barWidthLeft = w.config.grid.padding.left
+      barWidthRight = w.config.grid.padding.right
+
+      if (gl.barPadForNumericAxis > barWidthLeft) {
+        barWidthLeft = gl.barPadForNumericAxis
+        barWidthRight = gl.barPadForNumericAxis
+      }
+    }
     gl.dom.elGridRect = graphics.drawRect(
+      -strokeSize / 2 - barWidthLeft - 2,
       -strokeSize / 2,
-      -strokeSize / 2,
-      gl.gridWidth + strokeSize,
+      gl.gridWidth + strokeSize + barWidthRight + barWidthLeft + 4,
       gl.gridHeight + strokeSize,
@@ -249,2 +268,5 @@ 0,
       } else {
+        if (w.globals.isXNumeric) {
+          xCount = w.globals.xAxisScale.result.length
+        }
         categoryLines({ xC: xCount, x1, y1, x2, y2 })
@@ -251,0 +273,0 @@ }

src/modules/axes/XAxis.js

@@ -16,2 +16,4 @@ import Graphics from '../Graphics'
     const w = this.w
+    this.axesUtils = new AxesUtils(ctx)
+
     this.xaxisLabels = w.globals.labels.slice()
@@ -53,3 +55,2 @@ if (w.globals.timescaleLabels.length > 0 && !w.globals.isBarHorizontal) {
     this.yaxis = w.config.yaxis[0]
-    this.axesUtils = new AxesUtils(ctx)
   }
@@ -104,3 +105,2 @@
         )
-        // const textRect = graphics.getTextRects(label.text)
 
@@ -113,6 +113,15 @@ this.drawnLabels.push(label.text)
         }
-        let elTick = graphics.drawText({
+
+        label = this.axesUtils.checkForCroppedLabels(i, label, labelsLen)
+
+        const getCatForeColor = () => {
+          return w.config.xaxis.convertedCatToNumeric
+            ? this.xaxisForeColors[w.globals.minX + i - 1]
+            : this.xaxisForeColors[i]
+        }
+
+        let elText = graphics.drawText({
           x: label.x,
           y: this.offY + w.config.xaxis.labels.offsetY + offsetYCorrection,
-          text: '',
+          text: label.text,
           textAnchor: 'middle',
@@ -123,4 +132,5 @@ fontWeight: label.isBold ? 600 : 400,
           foreColor: Array.isArray(this.xaxisForeColors)
-            ? this.xaxisForeColors[i]
+            ? getCatForeColor()
             : this.xaxisForeColors,
+          isPlainText: false,
           cssClass:
@@ -130,43 +140,7 @@ 'apexcharts-xaxis-label ' + w.config.xaxis.labels.style.cssClass
 
-        if (i === 0) {
-          // check if first label is being cropped
-          const firstTextRect = graphics.getTextRects(label.text)
+        elXaxisTexts.add(elText)
 
-          const divideBy =
-            w.globals.rotateXLabels || w.config.xaxis.labels.rotateAlways
-              ? 1
-              : 2
-
-          if (
-            w.globals.skipFirstTimelinelabel ||
-            (label.x + firstTextRect.width / divideBy >
-              w.globals.dom.elGraphical.x() &&
-              label.x <= 0)
-          ) {
-            label.text = ''
-          }
-        }
-
-        if (i === labelsLen - 1) {
-          // check if last label is being cropped
-
-          const lastTextRect = graphics.getTextRects(label.text)
-
-          if (
-            w.globals.skipLastTimelinelabel ||
-            lastTextRect.width / 2 + label.x >
-              w.globals.gridWidth + w.globals.x2SpaceAvailable ||
-            label.x > w.globals.gridWidth
-          ) {
-            label.text = ''
-          }
-        }
-
-        elXaxisTexts.add(elTick)
-
-        graphics.addTspan(elTick, label.text, this.xaxisFontFamily)
-
         let elTooltipTitle = document.createElementNS(w.globals.SVGNS, 'title')
         elTooltipTitle.textContent = label.text
-        elTick.node.appendChild(elTooltipTitle)
+        elText.node.appendChild(elTooltipTitle)
 
@@ -286,2 +260,3 @@ xPos = xPos + colWidth
           fontFamily: ylabels.style.fontFamily,
+          isPlainText: false,
           cssClass: 'apexcharts-yaxis-label ' + ylabels.style.cssClass
@@ -292,2 +267,6 @@ })
 
+        let elTooltipTitle = document.createElementNS(w.globals.SVGNS, 'title')
+        elTooltipTitle.textContent = label.text
+        elLabel.node.appendChild(elTooltipTitle)
+
         if (w.config.yaxis[realIndex].labels.rotate !== 0) {
@@ -429,3 +408,3 @@ let labelRotatingCenter = graphics.rotateAroundCenter(elLabel.node)
     let xAxisTextsInversed = w.globals.dom.baseEl.querySelectorAll(
-      '.apexcharts-xaxis-inversed-texts-g text'
+      '.apexcharts-xaxis-inversed-texts-g text tspan'
     )
@@ -453,8 +432,10 @@
         if (w.config.xaxis.labels.trim) {
-          graphics.placeTextWithEllipsis(
-            tSpan[0],
-            tSpan[0].textContent,
-            w.config.xaxis.labels.maxHeight -
-              (w.config.legend.position === 'bottom' ? 20 : 10)
-          )
+          tSpan.forEach((ts) => {
+            graphics.placeTextWithEllipsis(
+              ts,
+              ts.textContent,
+              w.config.xaxis.labels.maxHeight -
+                (w.config.legend.position === 'bottom' ? 20 : 10)
+            )
+          })
         }
@@ -469,3 +450,5 @@ }
         if (w.config.xaxis.labels.trim && w.config.xaxis.type !== 'datetime') {
-          graphics.placeTextWithEllipsis(tSpan[0], tSpan[0].textContent, width)
+          tSpan.forEach((ts) => {
+            graphics.placeTextWithEllipsis(ts, ts.textContent, width)
+          })
         }
@@ -472,0 +455,0 @@ }

src/modules/axes/YAxis.js

@@ -65,6 +65,5 @@ import Graphics from '../Graphics'
     let labels = w.globals.yAxisScale[realIndex].result.slice()
-    if (w.config.yaxis[realIndex] && w.config.yaxis[realIndex].reversed) {
-      labels.reverse()
-    }
 
+    labels = this.axesUtils.checkForReversedLabels(realIndex, labels)
+
     let firstLabel = ''
@@ -90,2 +89,3 @@ if (w.config.yaxis[realIndex].labels.show) {
           foreColor: w.config.yaxis[realIndex].labels.style.color,
+          isPlainText: false,
           cssClass:
@@ -214,5 +214,3 @@ 'apexcharts-yaxis-label ' +
 
-    if (w.config.yaxis[realIndex] && w.config.yaxis[realIndex].reversed) {
-      labels.reverse()
-    }
+    labels = this.axesUtils.checkForReversedLabels(realIndex, labels)
 
@@ -250,7 +248,6 @@ const tl = timescaleLabels.length
         }
-
         let elTick = graphics.drawText({
           x,
           y: this.xAxisoffX + w.config.xaxis.labels.offsetY + 30,
-          text: '',
+          text: val,
           textAnchor: 'middle',
@@ -262,2 +259,3 @@ foreColor: Array.isArray(this.xaxisForeColors)
           fontFamily: this.xaxisFontFamily,
+          isPlainText: false,
           cssClass:
@@ -279,2 +277,35 @@ 'apexcharts-xaxis-label ' + w.config.xaxis.labels.style.cssClass
 
+    this.inversedYAxisTitleText(elXaxis)
+    this.inversedYAxisBorder(elXaxis)
+
+    return elXaxis
+  }
+
+  inversedYAxisBorder(parent) {
+    const w = this.w
+    const graphics = new Graphics(this.ctx)
+
+    let axisBorder = w.config.xaxis.axisBorder
+    if (axisBorder.show) {
+      let lineCorrection = 0
+      if (w.config.chart.type === 'bar' && w.globals.isXNumeric) {
+        lineCorrection = lineCorrection - 15
+      }
+      let elHorzLine = graphics.drawLine(
+        w.globals.padHorizontal + lineCorrection + axisBorder.offsetX,
+        this.xAxisoffX,
+        w.globals.gridWidth,
+        this.xAxisoffX,
+        axisBorder.color,
+        0,
+        axisBorder.height
+      )
+
+      parent.add(elHorzLine)
+    }
+  }
+
+  inversedYAxisTitleText(parent) {
+    const w = this.w
+    const graphics = new Graphics(this.ctx)
     if (w.config.xaxis.title.text !== undefined) {
@@ -302,25 +333,4 @@ let elYaxisTitle = graphics.group({
 
-      elXaxis.add(elYaxisTitle)
+      parent.add(elYaxisTitle)
     }
-
-    let axisBorder = w.config.xaxis.axisBorder
-    if (axisBorder.show) {
-      let lineCorrection = 0
-      if (w.config.chart.type === 'bar' && w.globals.isXNumeric) {
-        lineCorrection = lineCorrection - 15
-      }
-      let elHorzLine = graphics.drawLine(
-        w.globals.padHorizontal + lineCorrection + axisBorder.offsetX,
-        this.xAxisoffX,
-        w.globals.gridWidth,
-        this.xAxisoffX,
-        axisBorder.color,
-        0,
-        axisBorder.height
-      )
-
-      elXaxis.add(elHorzLine)
-    }
-
-    return elXaxis
   }
@@ -371,13 +381,8 @@
       let titleRotatingCenter = graphics.rotateAroundCenter(yAxisTitle)
-      if (!yAxisOpposite) {
-        yAxisTitle.setAttribute(
-          'transform',
-          `rotate(-${w.config.yaxis[realIndex].title.rotate} ${titleRotatingCenter.x} ${titleRotatingCenter.y})`
-        )
-      } else {
-        yAxisTitle.setAttribute(
-          'transform',
-          `rotate(${w.config.yaxis[realIndex].title.rotate} ${titleRotatingCenter.x} ${titleRotatingCenter.y})`
-        )
-      }
+      yAxisTitle.setAttribute(
+        'transform',
+        `rotate(${yAxisOpposite ? '' : '-'}${
+          w.config.yaxis[realIndex].title.rotate
+        } ${titleRotatingCenter.x} ${titleRotatingCenter.y})`
+      )
     }
@@ -384,0 +389,0 @@ }

src/modules/Core.js

@@ -12,3 +12,3 @@ import Bar from '../charts/Bar'
 import RangeBar from '../charts/RangeBar'
-import Legend from './Legend'
+import Legend from './legend/Legend'
 import Line from '../charts/Line'
@@ -367,3 +367,4 @@ import Graphics from './Graphics'
     ) {
-      legendHeight = new Legend(this.ctx).getLegendBBox().clwh + 10
+      legendHeight =
+        new Legend(this.ctx).legendHelpers.getLegendBBox().clwh + 10
     }
@@ -370,0 +371,0 @@

src/modules/CoreUtils.js

@@ -13,3 +13,4 @@ /*
     let comboCharts = false
-    let comboChartsHasBars = false
+    let comboBarCount = 0
+
     // if user specified a type in series too, turn on comboCharts flag
@@ -19,4 +20,8 @@ if (series.length && typeof series[0].type !== 'undefined') {
       series.forEach((s) => {
-        if (s.type === 'bar' || s.type === 'column') {
-          comboChartsHasBars = true
+        if (
+          s.type === 'bar' ||
+          s.type === 'column' ||
+          s.type === 'candlestick'
+        ) {
+          comboBarCount++
         }
@@ -27,4 +32,4 @@ })
     return {
-      comboCharts,
-      comboChartsHasBars
+      comboBarCount,
+      comboCharts
     }
@@ -90,2 +95,13 @@ }
 
+  getCategoryLabels(labels) {
+    const w = this.w
+    let catLabels = []
+    if (w.config.xaxis.convertedCatToNumeric) {
+      catLabels = labels.map((i) => {
+        return w.config.xaxis.labels.formatter(i - w.globals.minX + 1)
+      })
+    }
+
+    return catLabels
+  }
   // maxValsInArrayIndex is the index of series[] which has the largest number of items
@@ -224,4 +240,5 @@ getLargestSeries() {
     xRatio = gl.xRange / gl.gridWidth
-    initialXRatio = Math.abs(gl.initialmaxX - gl.initialminX) / gl.gridWidth
 
+    initialXRatio = Math.abs(gl.initialMaxX - gl.initialMinX) / gl.gridWidth
+
     invertedYRatio = gl.yRange / gl.gridWidth
@@ -228,0 +245,0 @@ invertedXRatio = gl.xRange / gl.gridHeight

src/modules/Data.js

@@ -125,2 +125,3 @@ import CoreUtils from './CoreUtils'
       const isXDate = !!dt.isValidDate(ser[activeI].data[j].x.toString())
+      const isXArr = Array.isArray(ser[activeI].data[j].x)
 
@@ -148,2 +149,6 @@ if (isXString || isXDate) {
         }
+      } else if (isXArr) {
+        // a multiline label described in array format
+        this.fallbackToCategory = true
+        this.twoDSeriesX.push(ser[activeI].data[j].x)
       } else {
@@ -185,22 +190,24 @@ // a numeric value in x property
     gl.seriesRangeBarTimeline.forEach((sr, si) => {
-      sr.forEach((sarr, sarri) => {
-        sarr.y.forEach((arr, arri) => {
-          for (let sri = 0; sri < sarr.y.length; sri++) {
-            if (arri !== sri) {
-              const range1y1 = arr.y1
-              const range1y2 = arr.y2
-              const range2y1 = sarr.y[sri].y1
-              const range2y2 = sarr.y[sri].y2
-              if (range1y1 <= range2y2 && range2y1 <= range1y2) {
-                if (sarr.overlaps.indexOf(arr.rangeName) < 0) {
-                  sarr.overlaps.push(arr.rangeName)
+      if (sr) {
+        sr.forEach((sarr, sarri) => {
+          sarr.y.forEach((arr, arri) => {
+            for (let sri = 0; sri < sarr.y.length; sri++) {
+              if (arri !== sri) {
+                const range1y1 = arr.y1
+                const range1y2 = arr.y2
+                const range2y1 = sarr.y[sri].y1
+                const range2y2 = sarr.y[sri].y2
+                if (range1y1 <= range2y2 && range2y1 <= range1y2) {
+                  if (sarr.overlaps.indexOf(arr.rangeName) < 0) {
+                    sarr.overlaps.push(arr.rangeName)
+                  }
+                  if (sarr.overlaps.indexOf(sarr.y[sri].rangeName) < 0) {
+                    sarr.overlaps.push(sarr.y[sri].rangeName)
+                  }
                 }
-                if (sarr.overlaps.indexOf(sarr.y[sri].rangeName) < 0) {
-                  sarr.overlaps.push(sarr.y[sri].rangeName)
-                }
               }
             }
-          }
+          })
         })
-      })
+      }
     })
@@ -397,2 +404,4 @@
       if (this.isMultiFormat()) {
+        cnf.xaxis.convertedCatToNumeric = false
+
         if (this.isFormat2DArray()) {
@@ -412,3 +421,3 @@ this.handleFormat2DArray(ser, i)
 
-        if (!this.fallbackToCategory) {
+        if (i === this.activeSeriesIndex && !this.fallbackToCategory) {
           gl.isXNumeric = true
@@ -502,3 +511,2 @@ }
       if (gl.axisCharts) {
-        // for axis charts, we get the longest series and create labels from it
         if (gl.series.length > 0) {
@@ -535,2 +543,8 @@ for (let i = 0; i < gl.series[gl.maxValsInArrayIndex].length; i++) {
 
+      if (cnf.xaxis.convertedCatToNumeric) {
+        gl.categoryLabels = labelArr.map((l) => {
+          return cnf.xaxis.labels.formatter(l)
+        })
+      }
+
       // Turn on this global flag to indicate no labels were provided by user
@@ -587,2 +601,11 @@ gl.noLabelsProvided = true
     }
+
+    // check for multiline xaxis
+    const catLabels = this.coreUtils.getCategoryLabels(gl.labels)
+    for (let l = 0; l < catLabels.length; l++) {
+      if (Array.isArray(catLabels[l])) {
+        gl.isMultiLineX = true
+        break
+      }
+    }
   }
@@ -589,0 +612,0 @@

src/modules/DataLabels.js

@@ -306,4 +306,7 @@ import Scatter from './../charts/Scatter'
       const coords = el.getBBox()
-      const elRect = this.addBackgroundToDataLabel(el, coords)
+      let elRect = null
 
+      if (coords.width && coords.height) {
+        elRect = this.addBackgroundToDataLabel(el, coords)
+      }
       if (elRect) {
@@ -334,7 +337,9 @@ el.parentNode.insertBefore(elRect.node, el)
     const elSeries = w.globals.dom.baseEl.querySelector(
-      '.apexcharts-plot-series'
+      '.apexcharts-plot-series:last-child'
     )
 
     for (let i = 0; i < elDataLabelsNodes.length; i++) {
-      elSeries.insertAdjacentElement('beforeEnd', elDataLabelsNodes[i])
+      if (elSeries) {
+        elSeries.insertAdjacentElement('beforeEnd', elDataLabelsNodes[i])
+      }
     }
@@ -341,0 +346,0 @@ }

src/modules/Exports.js

@@ -26,2 +26,3 @@ import Data from '../modules/Data'
     if (xcrosshairs) {
+      xcrosshairs.setAttribute('x', -500)
       xcrosshairs.setAttribute('x1', -500)
@@ -31,2 +32,3 @@ xcrosshairs.setAttribute('x2', -500)
     if (ycrosshairs) {
+      ycrosshairs.setAttribute('y', -100)
       ycrosshairs.setAttribute('y1', -100)
@@ -33,0 +35,0 @@ ycrosshairs.setAttribute('y2', -100)

src/modules/Formatters.js

@@ -26,3 +26,3 @@ import DateTime from '../utils/DateTime'
           return datetimeObj.formatDate(
-            new Date(val),
+            datetimeObj.getDate(val),
             w.config.tooltip.x.format
@@ -37,23 +37,52 @@ )
 
+  defaultGeneralFormatter(val) {
+    if (Array.isArray(val)) {
+      return val.map((v) => {
+        return v
+      })
+    } else {
+      return val
+    }
+  }
+
+  defaultYFormatter(v, yaxe, i) {
+    let w = this.w
+
+    if (Utils.isNumber(v)) {
+      if (w.globals.yValueDecimal !== 0) {
+        v = v.toFixed(
+          yaxe.decimalsInFloat !== undefined
+            ? yaxe.decimalsInFloat
+            : w.globals.yValueDecimal
+        )
+      } else if (w.globals.maxYArr[i] - w.globals.minYArr[i] < 10) {
+        v = v.toFixed(1)
+      } else {
+        v = v.toFixed(0)
+      }
+    }
+    return v
+  }
+
   setLabelFormatters() {
     let w = this.w
 
-    w.globals.xLabelFormatter = function(val) {
-      return val
+    w.globals.xLabelFormatter = (val) => {
+      return this.defaultGeneralFormatter(val)
     }
 
-    w.globals.xaxisTooltipFormatter = function(val) {
-      return val
+    w.globals.xaxisTooltipFormatter = (val) => {
+      return this.defaultGeneralFormatter(val)
     }
 
-    w.globals.ttKeyFormatter = function(val) {
-      return val
+    w.globals.ttKeyFormatter = (val) => {
+      return this.defaultGeneralFormatter(val)
     }
 
-    w.globals.ttZFormatter = function(val) {
+    w.globals.ttZFormatter = (val) => {
       return val
     }
 
-    w.globals.legendFormatter = function(val) {
-      return val
+    w.globals.legendFormatter = (val) => {
+      return this.defaultGeneralFormatter(val)
     }
@@ -65,6 +94,10 @@
     } else {
-      w.globals.xLabelFormatter = function(val) {
+      w.globals.xLabelFormatter = (val) => {
         if (Utils.isNumber(val)) {
           // numeric xaxis may have smaller range, so defaulting to 1 decimal
-          if (w.config.xaxis.type === 'numeric' && w.globals.dataPoints < 50) {
+          if (
+            !w.config.xaxis.convertedCatToNumeric &&
+            w.config.xaxis.type === 'numeric' &&
+            w.globals.dataPoints < 50
+          ) {
             return val.toFixed(1)
@@ -116,19 +149,12 @@ }
       } else {
-        w.globals.yLabelFormatters[i] = function(val) {
+        w.globals.yLabelFormatters[i] = (val) => {
           if (!w.globals.xyCharts) return val
 
-          if (Utils.isNumber(val)) {
-            if (w.globals.yValueDecimal !== 0) {
-              return val.toFixed(
-                yaxe.decimalsInFloat !== undefined
-                  ? yaxe.decimalsInFloat
-                  : w.globals.yValueDecimal
-              )
-            } else if (w.globals.maxYArr[i] - w.globals.minYArr[i] < 10) {
-              return val.toFixed(1)
-            } else {
-              return val.toFixed(0)
-            }
+          if (Array.isArray(val)) {
+            return val.map((v) => {
+              return this.defaultYFormatter(v, yaxe, i)
+            })
+          } else {
+            return this.defaultYFormatter(val, yaxe, i)
           }
-          return val
         }
@@ -135,0 +161,0 @@ }

src/modules/Graphics.js

@@ -284,4 +284,6 @@ import Utils from '../utils/Utils'
       j,
+      realIndex,
       pathFrom,
       pathTo,
+      fill,
       strokeWidth
@@ -441,17 +443,17 @@ }
 
-  drawText(opts) {
+  drawText({
+    x,
+    y,
+    text,
+    textAnchor,
+    fontSize,
+    fontFamily,
+    fontWeight,
+    foreColor,
+    opacity,
+    cssClass = '',
+    isPlainText = true
+  }) {
     let w = this.w
 
-    let {
-      x,
-      y,
-      text,
-      textAnchor,
-      fontSize,
-      fontFamily,
-      fontWeight,
-      foreColor,
-      opacity
-    } = opts
-
     if (typeof text === 'undefined') text = ''
@@ -473,7 +475,9 @@
         for (let i = 0; i < text.length; i++) {
-          add.tspan(text[i])
+          i === 0 ? add.tspan(text[i]) : add.tspan(text[i]).newLine()
         }
       })
     } else {
-      elText = w.globals.dom.Paper.plain(text)
+      elText = isPlainText
+        ? w.globals.dom.Paper.plain(text)
+        : w.globals.dom.Paper.text((add) => add.tspan(text))
     }
@@ -490,3 +494,3 @@
       fill: foreColor,
-      class: 'apexcharts-text ' + opts.cssClass ? opts.cssClass : ''
+      class: 'apexcharts-text ' + cssClass
     })
@@ -500,11 +504,2 @@
 
-  addTspan(textEl, text, fontFamily) {
-    const tspan = textEl.tspan(text)
-
-    if (!fontFamily) {
-      fontFamily = this.w.config.chart.fontFamily
-    }
-    tspan.node.style.fontFamily = fontFamily
-  }
-
   drawMarker(x, y, opts) {
@@ -769,4 +764,4 @@ x = x || 0
   placeTextWithEllipsis(textObj, textString, width) {
+    if (typeof textObj.getComputedTextLength !== 'function') return
     textObj.textContent = textString
-
     if (textString.length > 0) {
@@ -773,0 +768,0 @@ // ellipsis is needed

src/modules/Range.js

 import Utils from '../utils/Utils'
+import DateTime from '../utils/DateTime'
 import Scales from './Scales'
@@ -92,2 +93,7 @@
 
+    // all negative values in a bar chart, hence make the max to 0
+    if (cnf.chart.type === 'bar' && minY < 0 && maxY < 0) {
+      maxY = 0
+    }
+
     return {
@@ -272,5 +278,5 @@ minY,
               gl.maxX = Math.max(gl.maxX, gl.labels[i][j])
-              gl.initialmaxX = Math.max(gl.maxX, gl.labels[i][j])
+              gl.initialMaxX = Math.max(gl.maxX, gl.labels[i][j])
               gl.minX = Math.min(gl.minX, gl.labels[i][j])
-              gl.initialminX = Math.min(gl.minX, gl.labels[i][j])
+              gl.initialMinX = Math.min(gl.minX, gl.labels[i][j])
             }
@@ -285,36 +291,9 @@ }
         gl.maxX = gl.labels[gl.labels.length - 1]
-        gl.initialmaxX = gl.labels[gl.labels.length - 1]
+        gl.initialMaxX = gl.labels[gl.labels.length - 1]
         gl.minX = 1
-        gl.initialminX = 1
+        gl.initialMinX = 1
       }
     }
 
-    // bar chart specific
-    // for numeric xaxis, we need to adjust some padding left and right for bar charts
-    if (
-      gl.comboChartsHasBars ||
-      cnf.chart.type === 'candlestick' ||
-      (cnf.chart.type === 'bar' && gl.isXNumeric)
-    ) {
-      if (cnf.xaxis.type !== 'category' || gl.isXNumeric) {
-        const t =
-          (gl.svgWidth / gl.dataPoints) *
-          (Math.abs(gl.maxX - gl.minX) / gl.svgWidth)
-
-        // some padding to the left to prevent cropping of the bars
-        const minX = gl.minX - t / 2
-        gl.minX = minX
-        gl.initialminX = minX
-
-        // some padding to the right to prevent cropping of the bars
-        const maxX = gl.maxX + t / ((gl.series.length + 1) / gl.series.length)
-        gl.maxX = maxX
-        gl.initialmaxX = maxX
-      }
-    }
-
-    if (
-      (gl.isXNumeric || gl.noLabelsProvided) &&
-      (!cnf.xaxis.convertedCatToNumeric || gl.dataFormatXNumeric)
-    ) {
+    if (gl.isXNumeric || gl.noLabelsProvided || gl.dataFormatXNumeric) {
       let ticks
@@ -325,4 +304,4 @@
 
-        // no labels provided and total number of dataPoints is less than 20
-        if (cnf.xaxis.type === 'numeric' && gl.dataPoints < 20) {
+        // no labels provided and total number of dataPoints is less than 30
+        if (cnf.xaxis.type === 'numeric' && gl.dataPoints < 30) {
           ticks = gl.dataPoints - 1
@@ -336,6 +315,12 @@ }
       } else if (cnf.xaxis.tickAmount === 'dataPoints') {
-        ticks = gl.series[gl.maxValsInArrayIndex].length - 1
+        if (gl.series.length > 1) {
+          ticks = gl.series[gl.maxValsInArrayIndex].length - 1
+        }
+        if (gl.isXNumeric) {
+          ticks = gl.maxX - gl.minX - 1
+        }
       } else {
         ticks = cnf.xaxis.tickAmount
       }
+      gl.xTickAmount = ticks
 
@@ -356,3 +341,15 @@ // override all min/max values by user defined values (x axis)
       if (gl.minX !== Number.MAX_VALUE && gl.maxX !== -Number.MAX_VALUE) {
-        gl.xAxisScale = this.scales.linearScale(gl.minX, gl.maxX, ticks)
+        if (cnf.xaxis.convertedCatToNumeric) {
+          let catScale = []
+          for (let i = gl.minX - 1; i < gl.maxX; i++) {
+            catScale.push(i + 1)
+          }
+          gl.xAxisScale = {
+            result: catScale,
+            niceMin: catScale[0],
+            niceMax: catScale[catScale.length - 1]
+          }
+        } else {
+          gl.xAxisScale = this.scales.setXScale(gl.minX, gl.maxX)
+        }
       } else {
@@ -378,10 +375,17 @@ gl.xAxisScale = this.scales.linearScale(1, ticks, ticks)
     if (gl.minX === gl.maxX) {
+      let datetimeObj = new DateTime(this.ctx)
+
       // single dataPoint
       if (cnf.xaxis.type === 'datetime') {
-        const newMinX = new Date(gl.minX)
-        newMinX.setDate(newMinX.getDate() - 2)
+        const utc = cnf.xaxis.labels.datetimeUTC
+        const newMinX = datetimeObj.getDate(gl.minX)
+        utc
+          ? newMinX.setUTCDate(newMinX.getDate() - 2)
+          : newMinX.setDate(newMinX.getDate() - 2)
         gl.minX = new Date(newMinX).getTime()
 
-        const newMaxX = new Date(gl.maxX)
-        newMaxX.setDate(newMaxX.getDate() + 2)
+        const newMaxX = datetimeObj.getDate(gl.maxX)
+        utc
+          ? newMaxX.setUTCDate(newMaxX.getDate() + 2)
+          : newMaxX.setDate(newMaxX.getDate() + 2)
         gl.maxX = new Date(newMaxX).getTime()
@@ -388,0 +392,0 @@ } else if (

src/modules/Scales.js

@@ -11,8 +11,5 @@ import Utils from '../utils/Utils'
   // This routine creates the Y axis values for a graph.
-  niceScale(yMin, yMax, diff, index = 0, ticks = 10) {
+  niceScale(yMin, yMax, diff, index = 0, ticks = 10, NO_MIN_MAX_PROVIDED) {
     const w = this.w
-    const NO_MIN_MAX_PROVIDED =
-      (this.w.config.yaxis[index].max === undefined &&
-        this.w.config.yaxis[index].min === undefined) ||
-      this.w.config.yaxis[index].forceNiceScale
+
     if (
@@ -33,3 +30,3 @@ (yMin === Number.MIN_VALUE && yMax === 0) ||
       // adjust the min/max again
-      console.warn('yaxis.min cannot be greater than yaxis.max')
+      console.warn('axis.min cannot be greater than axis.max')
       yMax = yMin + 0.1
@@ -238,2 +235,6 @@ } else if (yMin === yMax) {
         } else {
+          const noMinMaxProvided =
+            (cnf.yaxis[index].max === undefined &&
+              cnf.yaxis[index].min === undefined) ||
+            cnf.yaxis[index].forceNiceScale
           gl.yAxisScale[index] = this.niceScale(
@@ -245,3 +246,4 @@ minY,
             // fix https://github.com/apexcharts/apexcharts.js/issues/397
-            y.tickAmount ? y.tickAmount : diff < 5 && diff > 1 ? diff + 1 : 5
+            y.tickAmount ? y.tickAmount : diff < 5 && diff > 1 ? diff + 1 : 5,
+            noMinMaxProvided
           )
@@ -253,2 +255,21 @@ }
 
+  setXScale(minX, maxX) {
+    const w = this.w
+    const gl = w.globals
+    const x = w.config.xaxis
+    let diff = Math.abs(maxX - minX)
+    if (maxX === -Number.MAX_VALUE || !Utils.isNumber(maxX)) {
+      // no data in the chart. Either all series collapsed or user passed a blank array
+      gl.xAxisScale = this.linearScale(0, 5, 5)
+    } else {
+      gl.xAxisScale = this.niceScale(
+        minX,
+        maxX,
+        diff,
+        x.tickAmount ? x.tickAmount : diff < 5 && diff > 1 ? diff + 1 : 5
+      )
+    }
+    return gl.xAxisScale
+  }
+
   setMultipleYScales() {
@@ -255,0 +276,0 @@ const gl = this.w.globals

src/modules/Series.js

@@ -388,4 +388,2 @@ import Graphics from './Graphics'
 
-      titleText.node.setAttribute('class', 'apexcharts-title-text')
-
       w.globals.dom.Paper.add(titleText)
@@ -392,0 +390,0 @@ }

src/modules/settings/Config.js

 import Defaults from './Defaults'
 import Utils from './../../utils/Utils'
-import CoreUtils from '../CoreUtils'
 import Options from './Options'
-import { optionYAxis } from './options/axis'
+import { optionYAxis } from './options/axes'
 import {
@@ -87,12 +86,15 @@ optionXAxisAnnotation,
 
-      const combo = CoreUtils.checkComboSeries(opts.series)
-      if (
-        (opts.chart.type === 'line' ||
-          opts.chart.type === 'area' ||
-          opts.chart.type === 'scatter') &&
-        !combo.comboChartsHasBars &&
-        opts.xaxis.type !== 'datetime' &&
-        opts.xaxis.type !== 'numeric' &&
-        opts.xaxis.tickPlacement !== 'between'
-      ) {
+      const isBarHorizontal =
+        opts.chart.type === 'bar' &&
+        opts.plotOptions &&
+        opts.plotOptions.bar &&
+        opts.plotOptions.bar.horizontal
+
+      const notNumericXAxis =
+        opts.xaxis.type !== 'datetime' && opts.xaxis.type !== 'numeric'
+
+      let tickPlacement = opts.xaxis.tickPlacement
+        ? opts.xaxis.tickPlacement
+        : chartDefaults.xaxis && chartDefaults.xaxis.tickPlacement
+      if (!isBarHorizontal && notNumericXAxis && tickPlacement !== 'between') {
         opts = Defaults.convertCatToNumeric(opts)
@@ -127,3 +129,7 @@ }
   extendYAxis(opts) {
-    if (typeof opts.yaxis === 'undefined') {
+    if (
+      typeof opts.yaxis === 'undefined' ||
+      !opts.yaxis ||
+      (Array.isArray(opts.yaxis) && opts.yaxis.length === 0)
+    ) {
       opts.yaxis = {}
@@ -149,2 +155,27 @@ }
     }
+
+    let isLogY = false
+    opts.yaxis.forEach((y) => {
+      if (y.logarithmic) {
+        isLogY = true
+      }
+    })
+
+    // A logarithmic chart works correctly when each series has a corresponding y-axis
+    // If this is not the case, we manually create yaxis for multi-series log chart
+    if (isLogY && opts.series.length !== opts.yaxis.length) {
+      opts.yaxis = opts.series.map((s, i) => {
+        if (!s.name) {
+          opts.series[i].name = `series-${i + 1}`
+        }
+        if (opts.yaxis[i]) {
+          opts.yaxis[i].seriesName = opts.series[i].name
+          return opts.yaxis[i]
+        } else {
+          const newYaxis = Utils.extend(optionYAxis, opts.yaxis[0])
+          newYaxis.show = false
+          return newYaxis
+        }
+      })
+    }
     return opts
@@ -151,0 +182,0 @@ }

src/modules/settings/Defaults.js

@@ -44,3 +44,4 @@ import Utils from '../../utils/Utils'
   sparkline(defaults) {
-    this.opts.yaxis[0].labels.show = false
+    this.opts.yaxis[0].show = false
+    this.opts.yaxis[0].title.text = ''
     this.opts.yaxis[0].axisBorder.show = false
@@ -99,2 +100,5 @@ this.opts.yaxis[0].axisTicks.show = false
           easing: 'swing'
+        },
+        zoom: {
+          enabled: false
         }
@@ -134,2 +138,3 @@ },
         },
+        tickPlacement: 'between',
         crosshairs: {
@@ -203,2 +208,7 @@ width: 'barWidth',
     return {
+      chart: {
+        zoom: {
+          enabled: false
+        }
+      },
       stroke: {
@@ -250,7 +260,7 @@ width: 0
               startVal = datetimeObj.formatDate(
-                new Date(start),
+                datetimeObj.getDate(start),
                 w.config.tooltip.x.format
               )
               endVal = datetimeObj.formatDate(
-                new Date(end),
+                datetimeObj.getDate(end),
                 w.config.tooltip.x.format
@@ -288,2 +298,3 @@ )
       xaxis: {
+        tickPlacement: 'between',
         tooltip: {
@@ -391,7 +402,6 @@ enabled: false
       function(val) {
-        return val
+        return Utils.isNumber(val) ? Math.floor(val) : val
       }
     opts.chart = opts.chart || {}
-    opts.chart.zoom =
-      opts.chart.zoom || (window.Apex.chart && window.Apex.chart.zoom) || {}
+
     const defaultFormatter = opts.xaxis.labels.formatter
@@ -405,3 +415,3 @@ const labels =
       opts.xaxis.labels.formatter = function(val) {
-        return defaultFormatter(labels[val - 1])
+        return defaultFormatter(labels[Math.floor(val) - 1])
       }
@@ -412,3 +422,3 @@ }
     opts.labels = []
-    opts.chart.zoom.enabled = opts.chart.zoom.enabled || false
+    opts.xaxis.tickAmount = 'dataPoints'
 
@@ -513,2 +523,5 @@ return opts
       chart: {
+        zoom: {
+          enabled: false
+        },
         toolbar: {
@@ -567,2 +580,5 @@ show: false
       chart: {
+        zoom: {
+          enabled: false
+        },
         toolbar: {
@@ -618,2 +634,7 @@ show: false
     return {
+      chart: {
+        zoom: {
+          enabled: false
+        }
+      },
       dataLabels: {
@@ -620,0 +641,0 @@ enabled: false,

src/modules/settings/Globals.js

@@ -18,2 +18,3 @@ import Utils from './../../utils/Utils'
     gl.seriesTotals = []
+    gl.seriesLog = []
     gl.stackedSeriesTotals = []
@@ -26,2 +27,3 @@ gl.seriesXvalues = [] // we will need this in tooltip (it's x position)
     gl.labels = []
+    gl.categoryLabels = []
     gl.timescaleLabels = []
@@ -39,2 +41,3 @@ gl.noLabelsProvided = false
     gl.isDataXYZ = false
+    gl.isMultiLineX = false
     gl.isMultipleYAxis = false
@@ -47,4 +50,4 @@ gl.maxY = -Number.MAX_VALUE
     gl.minX = Number.MAX_VALUE
-    gl.initialmaxX = -Number.MAX_VALUE
-    gl.initialminX = Number.MAX_VALUE
+    gl.initialMaxX = -Number.MAX_VALUE
+    gl.initialMinX = Number.MAX_VALUE
     gl.maxDate = 0
@@ -60,2 +63,4 @@ gl.minDate = Number.MAX_VALUE
     gl.yTitleCoords = []
+    gl.barPadForNumericAxis = 0
+    gl.padHorizontal = 0
     gl.xRange = 0
@@ -65,2 +70,3 @@ gl.yRange = []
     gl.dataPoints = 0
+    gl.xTickAmount = 0
   }
@@ -132,3 +138,2 @@
       yAxisSameScaleIndices: [],
-      padHorizontal: 0,
       maxValsInArrayIndex: 0,
@@ -167,3 +172,2 @@ radialSize: 0,
       // (refer them also as plot charts in the code)
-      isXNumeric: false, // bool: data was provided in a {[x,y], [x,y]} pattern
       isDataXYZ: false, // bool: data was provided in a {[x,y,z]} pattern
@@ -174,3 +178,2 @@ resized: false, // bool: user has resized
       comboCharts: false, // bool: whether it's a combination of line/column
-      comboChartsHasBars: false, // bool: whether it's a combination of line/column
       dataChanged: false, // bool: has data changed dynamically
@@ -177,0 +180,0 @@ previousPaths: [], // array: when data is changed, it will animate from

src/modules/settings/Options.js

 /**
  * ApexCharts Options for setting the initial configuration of ApexCharts
  **/
-import { optionYAxis, optionXAxis } from './options/axis'
+import { optionYAxis, optionXAxis } from './options/axes'
 import {
@@ -6,0 +6,0 @@ optionXAxisAnnotation,

src/modules/settings/options/chart.js

@@ -50,2 +50,3 @@ import en from './../../../locales/en.json'
   parentHeightOffset: 15,
+  redrawOnParentResize: true,
   id: undefined,
@@ -52,0 +53,0 @@ group: undefined,

src/modules/settings/options/plotOptions.js

@@ -48,3 +48,3 @@ export const optionPlotOptions = {
   radialBar: {
-    size: undefined,
+    size: undefined, // todo: deprecate in 4.0.0
     inverseOrder: false,
@@ -99,3 +99,6 @@ startAngle: 0,
         color: undefined,
-        offsetY: 0
+        offsetY: 0,
+        formatter(val) {
+          return val + '%'
+        }
       },
@@ -127,3 +130,3 @@ value: {
   pie: {
-    size: undefined,
+    size: undefined, // todo: deprecate in 4.0.0
     customScale: 1,
@@ -149,3 +152,6 @@ offsetX: 0,
           color: undefined,
-          offsetY: -10
+          offsetY: -10,
+          formatter(val) {
+            return val
+          }
         },
@@ -152,0 +158,0 @@ value: {

src/modules/Theme.js

@@ -29,3 +29,5 @@ import Utils from '../utils/Utils'
 
-    w.globals.dom.elWrap.classList.add(w.config.theme.mode)
+    w.globals.dom.elWrap.classList.add(
+      `apexcharts-theme-${w.config.theme.mode}`
+    )
 
@@ -32,0 +34,0 @@ if (w.config.colors === undefined) {

src/modules/TimeScale.js

 import DateTime from '../utils/DateTime'
-import Dimensions from './Dimensions'
+import Dimensions from './dimensions/Dimensions'
 import Graphics from './Graphics'
@@ -16,2 +16,3 @@ import Utils from '../utils/Utils'
     this.timeScaleArray = []
+    this.utc = this.w.config.xaxis.labels.datetimeUTC
   }
@@ -43,3 +44,3 @@
 
-    const timeIntervals = dt.getTimeUnitsfromTimestamp(minX, maxX)
+    const timeIntervals = dt.getTimeUnitsfromTimestamp(minX, maxX, this.utc)
 
@@ -440,14 +441,6 @@ const daysWidthOnXAxis = w.globals.gridWidth / daysDiff
     const dt = new DateTime(this.ctx)
-
     let unit = 'day'
-
-    let remainingHours = 24 - firstVal.minHour
-    let yrCounter = 0
-
-    // calculate the first tick position
-    let firstTickPosition = remainingHours * hoursWidthOnXAxis
     let firstTickValue = firstVal.minDate + 1
+    let date = firstTickValue
 
-    let val = firstTickValue
-
     const changeMonth = (dateVal, month, year) => {
@@ -467,5 +460,20 @@ let monthdays = dt.determineDaysOfMonths(month + 1, year)
 
-    let date = firstTickValue
+    let remainingHours = 24 - firstVal.minHour
+    let yrCounter = 0
+
+    // calculate the first tick position
+    let firstTickPosition = remainingHours * hoursWidthOnXAxis
+
+    let val = firstTickValue
     let month = changeMonth(date, currentMonth, currentYear)
 
+    if (firstVal.minHour === 0 && firstVal.minDate === 1) {
+      // the first value is the first day of month
+      firstTickPosition = 0
+      val = Utils.monthMod(firstVal.minMonth)
+      unit = 'month'
+      date = firstVal.minDate
+      numberOfDays++
+    }
+
     // push the first tick in the array
@@ -686,6 +694,7 @@ this.timeScaleArray.push({
     raw +=
-      ts.unit === 'minute'
-        ? ':' + ('0' + value).slice(-2) + ':00.000Z'
-        : ':00:00.000Z'
+      ts.unit === 'minute' ? ':' + ('0' + value).slice(-2) + ':00' : ':00:00'
 
+    if (this.utc) {
+      raw += '.000Z'
+    }
     return raw
@@ -704,4 +713,3 @@ }
 
-      // parse the whole ISO datestring
-      const dateString = new Date(Date.parse(raw))
+      const dateToFormat = dt.getDate(raw)
 
@@ -717,5 +725,5 @@ if (w.config.xaxis.labels.format === undefined) {
 
-        value = dt.formatDate(dateString, customFormat)
+        value = dt.formatDate(dateToFormat, customFormat)
       } else {
-        value = dt.formatDate(dateString, w.config.xaxis.labels.format)
+        value = dt.formatDate(dateToFormat, w.config.xaxis.labels.format)
       }
@@ -722,0 +730,0 @@

src/modules/TitleSubtitle.js

@@ -31,3 +31,3 @@ import Graphics from './Graphics'
     x = x + tsConfig.offsetX
-    y = y + parseInt(tsConfig.style.fontSize, 10) + 2
+    y = y + parseInt(tsConfig.style.fontSize, 10) + tsConfig.margin / 2
 
@@ -34,0 +34,0 @@ if (tsConfig.text !== undefined) {

src/modules/Toolbar.js

@@ -80,3 +80,5 @@ import Graphics from './Graphics'
         title: this.localeValues.selectionZoom,
-        class: w.globals.isTouchDevice ? 'hidden' : 'apexcharts-zoom-icon'
+        class: w.globals.isTouchDevice
+          ? 'apexcharts-element-hidden'
+          : 'apexcharts-zoom-icon'
       })
@@ -91,3 +93,5 @@ }
         title: this.localeValues.selection,
-        class: w.globals.isTouchDevice ? 'hidden' : 'apexcharts-selection-icon'
+        class: w.globals.isTouchDevice
+          ? 'apexcharts-element-hidden'
+          : 'apexcharts-selection-icon'
       })
@@ -101,3 +105,5 @@ }
         title: this.localeValues.pan,
-        class: w.globals.isTouchDevice ? 'hidden' : 'apexcharts-pan-icon'
+        class: w.globals.isTouchDevice
+          ? 'apexcharts-element-hidden'
+          : 'apexcharts-pan-icon'
       })
@@ -180,7 +186,7 @@ }
     if (w.globals.zoomEnabled) {
-      this.elZoom.classList.add('selected')
+      this.elZoom.classList.add('apexcharts-selected')
     } else if (w.globals.panEnabled) {
-      this.elPan.classList.add('selected')
+      this.elPan.classList.add('apexcharts-selected')
     } else if (w.globals.selectionEnabled) {
-      this.elSelection.classList.add('selected')
+      this.elSelection.classList.add('apexcharts-selected')
     }
@@ -220,6 +226,6 @@
 
-    if (!this.elSelection.classList.contains('selected')) {
-      this.elSelection.classList.add('selected')
+    if (!this.elSelection.classList.contains('apexcharts-selected')) {
+      this.elSelection.classList.add('apexcharts-selected')
     } else {
-      this.elSelection.classList.remove('selected')
+      this.elSelection.classList.remove('apexcharts-selected')
     }
@@ -232,6 +238,6 @@ }
 
-    if (!this.elZoom.classList.contains('selected')) {
-      this.elZoom.classList.add('selected')
+    if (!this.elZoom.classList.contains('apexcharts-selected')) {
+      this.elZoom.classList.add('apexcharts-selected')
     } else {
-      this.elZoom.classList.remove('selected')
+      this.elZoom.classList.remove('apexcharts-selected')
     }
@@ -259,6 +265,6 @@ }
     if (this.elZoom) {
-      this.elZoom.classList.add('selected')
+      this.elZoom.classList.add('apexcharts-selected')
     }
     if (this.elPan) {
-      this.elPan.classList.remove('selected')
+      this.elPan.classList.remove('apexcharts-selected')
     }
@@ -272,6 +278,6 @@ }
     if (this.elPan) {
-      this.elPan.classList.add('selected')
+      this.elPan.classList.add('apexcharts-selected')
     }
     if (this.elZoom) {
-      this.elZoom.classList.remove('selected')
+      this.elZoom.classList.remove('apexcharts-selected')
     }
@@ -284,6 +290,6 @@ }
 
-    if (!this.elPan.classList.contains('selected')) {
-      this.elPan.classList.add('selected')
+    if (!this.elPan.classList.contains('apexcharts-selected')) {
+      this.elPan.classList.add('apexcharts-selected')
     } else {
-      this.elPan.classList.remove('selected')
+      this.elPan.classList.remove('apexcharts-selected')
     }
@@ -301,9 +307,9 @@ }
     if (this.elPan) {
-      this.elPan.classList.remove('selected')
+      this.elPan.classList.remove('apexcharts-selected')
     }
     if (this.elSelection) {
-      this.elSelection.classList.remove('selected')
+      this.elSelection.classList.remove('apexcharts-selected')
     }
     if (this.elZoom) {
-      this.elZoom.classList.remove('selected')
+      this.elZoom.classList.remove('apexcharts-selected')
     }
@@ -316,5 +322,9 @@ }
     const centerX = (w.globals.minX + w.globals.maxX) / 2
-    const newMinX = (w.globals.minX + centerX) / 2
-    const newMaxX = (w.globals.maxX + centerX) / 2
+    let newMinX = (w.globals.minX + centerX) / 2
+    let newMaxX = (w.globals.maxX + centerX) / 2
 
+    if (w.config.xaxis.convertedCatToNumeric) {
+      newMinX = Math.floor(newMinX)
+      newMaxX = Math.floor(newMaxX)
+    }
     if (!w.globals.disableZoomIn) {
@@ -337,5 +347,10 @@ this.zoomUpdateOptions(newMinX, newMaxX)
     const centerX = (w.globals.minX + w.globals.maxX) / 2
-    const newMinX = w.globals.minX - (centerX - w.globals.minX)
-    const newMaxX = w.globals.maxX - (centerX - w.globals.maxX)
+    let newMinX = w.globals.minX - (centerX - w.globals.minX)
+    let newMaxX = w.globals.maxX - (centerX - w.globals.maxX)
 
+    if (w.config.xaxis.convertedCatToNumeric) {
+      newMinX = Math.floor(newMinX)
+      newMaxX = Math.floor(newMaxX)
+    }
+
     if (!w.globals.disableZoomOut) {
@@ -349,2 +364,14 @@ this.zoomUpdateOptions(newMinX, newMaxX)
 
+    if (w.config.xaxis.convertedCatToNumeric) {
+      // in category charts, avoid zooming out beyond min and max
+      if (newMinX < 1) {
+        newMinX = 1
+        newMaxX = w.globals.dataPoints
+      }
+
+      if (newMaxX - newMinX < 2) {
+        return
+      }
+    }
+
     let xaxis = {
@@ -406,6 +433,6 @@ min: newMinX,
     window.setTimeout(() => {
-      if (this.elMenu.classList.contains('open')) {
-        this.elMenu.classList.remove('open')
+      if (this.elMenu.classList.contains('apexcharts-menu-open')) {
+        this.elMenu.classList.remove('apexcharts-menu-open')
       } else {
-        this.elMenu.classList.add('open')
+        this.elMenu.classList.add('apexcharts-menu-open')
       }
@@ -438,4 +465,4 @@ }, 0)
       if (
-        w.globals.minX !== w.globals.initialminX &&
-        w.globals.maxX !== w.globals.initialmaxX
+        w.globals.minX !== w.globals.initialMinX ||
+        w.globals.maxX !== w.globals.initialMaxX
       ) {
@@ -442,0 +469,0 @@ ch.revertDefaultAxisMinMax()

src/modules/tooltip/AxesTooltip.js

@@ -39,3 +39,3 @@ /**
           'class',
-          tooltipCssClass + ' ' + w.config.tooltip.theme
+          tooltipCssClass + ' apexcharts-theme-' + w.config.tooltip.theme
         )
@@ -96,3 +96,3 @@
             'class',
-            tooltipCssClass + ' ' + w.config.tooltip.theme
+            tooltipCssClass + ' apexcharts-theme-' + w.config.tooltip.theme
           )
@@ -99,0 +99,0 @@

src/modules/tooltip/Intersect.js

@@ -187,3 +187,3 @@ import Utils from '../../utils/Utils'
     if (!w.config.tooltip.shared) {
-      if (w.globals.comboChartsHasBars) {
+      if (w.globals.comboBarCount > 0) {
         ttCtx.tooltipPosition.moveXCrosshairs(bx + strokeWidth / 2)
@@ -190,0 +190,0 @@ } else {

src/modules/tooltip/Labels.js

@@ -285,3 +285,3 @@ import Formatters from '../Formatters'
       if (firstTooltipSeriesGroup) {
-        firstTooltipSeriesGroup.classList.add('active')
+        firstTooltipSeriesGroup.classList.add('apexcharts-active')
         firstTooltipSeriesGroup.style.display = w.config.tooltip.items.display
@@ -362,5 +362,5 @@ }
     return {
-      val,
-      xVal,
-      xAxisTTVal,
+      val: Array.isArray(val) ? val.join(' ') : val,
+      xVal: Array.isArray(xVal) ? xVal.join(' ') : xVal,
+      xAxisTTVal: Array.isArray(xAxisTTVal) ? xAxisTTVal.join(' ') : xAxisTTVal,
       zVal
@@ -367,0 +367,0 @@ }

src/modules/tooltip/Position.js

@@ -36,13 +36,8 @@ import Graphics from '../Graphics'
 
-    if (
-      w.config.xaxis.crosshairs.width === 'tickWidth' ||
-      w.config.xaxis.crosshairs.width === 'barWidth'
-    ) {
-      if (x + ttCtx.xcrosshairsWidth > w.globals.gridWidth) {
-        x = w.globals.gridWidth - ttCtx.xcrosshairsWidth
-      }
-    } else {
-      if (j !== null) {
-        x = x + w.globals.gridWidth / tickAmount / 2
-      }
+    if (xcrosshairs !== null) {
+      xcrosshairs.setAttribute('x', x)
+      xcrosshairs.setAttribute('x1', x)
+      xcrosshairs.setAttribute('x2', x)
+      xcrosshairs.setAttribute('y2', w.globals.gridHeight)
+      xcrosshairs.classList.add('apexcharts-active')
     }
@@ -58,10 +53,2 @@
 
-    if (xcrosshairs !== null) {
-      xcrosshairs.setAttribute('x', x)
-      xcrosshairs.setAttribute('x1', x)
-      xcrosshairs.setAttribute('x2', x)
-      xcrosshairs.setAttribute('y2', w.globals.gridHeight)
-      xcrosshairs.classList.add('active')
-    }
-
     if (ttCtx.blxaxisTooltip) {
@@ -111,3 +98,3 @@ let tx = x
     if (ttCtx.xaxisTooltip !== null) {
-      ttCtx.xaxisTooltip.classList.add('active')
+      ttCtx.xaxisTooltip.classList.add('apexcharts-active')
 
@@ -167,3 +154,3 @@ let cy =
     if (w.globals.ignoreYAxisIndexes.indexOf(index) === -1) {
-      ttCtx.yaxisTTEls[index].classList.add('active')
+      ttCtx.yaxisTTEls[index].classList.add('apexcharts-active')
       ttCtx.yaxisTTEls[index].style.top = cy + 'px'
@@ -173,3 +160,3 @@ ttCtx.yaxisTTEls[index].style.left =
     } else {
-      ttCtx.yaxisTTEls[index].classList.remove('active')
+      ttCtx.yaxisTTEls[index].classList.remove('apexcharts-active')
     }
@@ -176,0 +163,0 @@ }

src/modules/tooltip/Tooltip.js

@@ -66,3 +66,3 @@ import Labels from './Labels'
     tooltipEl.classList.add('apexcharts-tooltip')
-    tooltipEl.classList.add(this.tConfig.theme)
+    tooltipEl.classList.add(`apexcharts-theme-${this.tConfig.theme}`)
     w.globals.dom.elWrap.appendChild(tooltipEl)
@@ -535,7 +535,7 @@
       if (xcrosshairs !== null) {
-        xcrosshairs.classList.add('active')
+        xcrosshairs.classList.add('apexcharts-active')
       }
 
       if (this.ycrosshairs !== null && this.blyaxisTooltip) {
-        this.ycrosshairs.classList.add('active')
+        this.ycrosshairs.classList.add('apexcharts-active')
       }
@@ -629,3 +629,3 @@
 
-      opt.tooltipEl.classList.add('active')
+      opt.tooltipEl.classList.add('apexcharts-active')
     } else if (e.type === 'mouseout' || e.type === 'touchend') {
@@ -646,3 +646,3 @@ this.handleMouseOut(opt)
     if (e.type === 'mousemove' || e.type === 'touchmove') {
-      tooltipEl.classList.add('active')
+      tooltipEl.classList.add('apexcharts-active')
 
@@ -661,3 +661,3 @@ this.tooltipLabels.drawSeriesTexts({
     } else if (e.type === 'mouseout' || e.type === 'touchend') {
-      tooltipEl.classList.remove('active')
+      tooltipEl.classList.remove('apexcharts-active')
     }
@@ -682,3 +682,3 @@ }
 
-    opt.tooltipEl.classList.remove('active')
+    opt.tooltipEl.classList.remove('apexcharts-active')
     this.deactivateHoverFilter()
@@ -689,9 +689,9 @@ if (w.config.chart.type !== 'bubble') {
     if (xcrosshairs !== null) {
-      xcrosshairs.classList.remove('active')
+      xcrosshairs.classList.remove('apexcharts-active')
     }
     if (this.ycrosshairs !== null) {
-      this.ycrosshairs.classList.remove('active')
+      this.ycrosshairs.classList.remove('apexcharts-active')
     }
     if (this.blxaxisTooltip) {
-      this.xaxisTooltip.classList.remove('active')
+      this.xaxisTooltip.classList.remove('apexcharts-active')
     }
@@ -705,3 +705,3 @@ if (this.blyaxisTooltip) {
       for (let i = 0; i < this.yaxisTTEls.length; i++) {
-        this.yaxisTTEls[i].classList.remove('active')
+        this.yaxisTTEls[i].classList.remove('apexcharts-active')
       }
@@ -708,0 +708,0 @@ }

src/modules/tooltip/Utils.js

@@ -276,6 +276,6 @@ import Utilities from '../../utils/Utils'
       if (state === 'enable') {
-        allTooltipSeriesGroups[i].classList.add('active')
+        allTooltipSeriesGroups[i].classList.add('apexcharts-active')
         allTooltipSeriesGroups[i].style.display = w.config.tooltip.items.display
       } else {
-        allTooltipSeriesGroups[i].classList.remove('active')
+        allTooltipSeriesGroups[i].classList.remove('apexcharts-active')
         allTooltipSeriesGroups[i].style.display = 'none'
@@ -282,0 +282,0 @@ }

src/modules/ZoomPanSelection.js

@@ -40,2 +40,3 @@ import Graphics from './Graphics'
     this.dragY = 0
+    this.moveDirection = 'none'
   }
@@ -82,3 +83,3 @@
     this.hoverArea = w.globals.dom.baseEl.querySelector(w.globals.chartClass)
-    this.hoverArea.classList.add('zoomable')
+    this.hoverArea.classList.add('apexcharts-zoomable')
 
@@ -206,2 +207,5 @@ this.eventList.forEach((event) => {
 
+      if (w.globals.panEnabled) {
+        me.delayedPanScrolled()
+      }
       if (w.globals.zoomEnabled) {
@@ -513,2 +517,15 @@ me.hideSelectionRect(this.selectionRect)
 
+        if (w.config.xaxis.convertedCatToNumeric) {
+          xLowestValue = Math.floor(xLowestValue)
+          xHighestValue = Math.floor(xHighestValue)
+
+          if (xLowestValue < 1) {
+            xLowestValue = 1
+            xHighestValue = w.globals.dataPoints
+          }
+
+          if (xHighestValue - xLowestValue < 2) {
+            xHighestValue = xLowestValue + 1
+          }
+        }
         let xaxis = {
@@ -591,4 +608,2 @@ min: xLowestValue,
 
-    let moveDirection
-
     // check to make sure there is data to compare against
@@ -602,9 +617,9 @@ if (typeof w.globals.lastClientPosition.x !== 'undefined') {
       if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX > 0) {
-        moveDirection = 'left'
+        this.moveDirection = 'left'
       } else if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX < 0) {
-        moveDirection = 'right'
+        this.moveDirection = 'right'
       } else if (Math.abs(deltaY) > Math.abs(deltaX) && deltaY > 0) {
-        moveDirection = 'up'
+        this.moveDirection = 'up'
       } else if (Math.abs(deltaY) > Math.abs(deltaX) && deltaY < 0) {
-        moveDirection = 'down'
+        this.moveDirection = 'down'
       }
@@ -620,14 +635,42 @@ }
     let xLowestValue = w.globals.minX
+
     let xHighestValue = w.globals.maxX
 
-    me.panScrolled(moveDirection, xLowestValue, xHighestValue)
+    // on a category, we don't pan continuosly as it causes bugs
+    if (w.config.xaxis.convertedCatToNumeric) {
+      me.panScrolled(xLowestValue, xHighestValue)
+    }
   }
 
-  panScrolled(moveDirection, xLowestValue, xHighestValue) {
+  delayedPanScrolled() {
     const w = this.w
 
+    let newMinX = w.globals.minX
+    let newMaxX = w.globals.maxX
+    const centerX = (w.globals.minX + w.globals.maxX) / 2
+
+    if (this.moveDirection === 'left') {
+      newMinX = w.globals.minX - centerX
+      newMaxX = w.globals.maxX - centerX
+    } else if (this.moveDirection === 'right') {
+      newMinX = w.globals.minX + centerX
+      newMaxX = w.globals.maxX + centerX
+    }
+
+    newMinX = Math.floor(newMinX)
+    newMaxX = Math.floor(newMaxX)
+    this.updateScrolledChart(
+      { xaxis: { min: newMinX, max: newMaxX } },
+      newMinX,
+      newMaxX
+    )
+  }
+
+  panScrolled(xLowestValue, xHighestValue) {
+    const w = this.w
+
     const xyRatios = this.xyRatios
     let yaxis = Utils.clone(w.globals.initialConfig.yaxis)
 
-    if (moveDirection === 'left') {
+    if (this.moveDirection === 'left') {
       xLowestValue =
@@ -637,3 +680,3 @@ w.globals.minX + (w.globals.gridWidth / 15) * xyRatios.xRatio
         w.globals.maxX + (w.globals.gridWidth / 15) * xyRatios.xRatio
-    } else if (moveDirection === 'right') {
+    } else if (this.moveDirection === 'right') {
       xLowestValue =
@@ -646,4 +689,4 @@ w.globals.minX - (w.globals.gridWidth / 15) * xyRatios.xRatio
     if (
-      xLowestValue < w.globals.initialminX ||
-      xHighestValue > w.globals.initialmaxX
+      xLowestValue < w.globals.initialMinX ||
+      xHighestValue > w.globals.initialMaxX
     ) {
@@ -678,2 +721,9 @@ xLowestValue = w.globals.minX
     }
+
+    this.updateScrolledChart(options, xLowestValue, xHighestValue)
+  }
+
+  updateScrolledChart(options, xLowestValue, xHighestValue) {
+    const w = this.w
+
     this.ctx._updateOptions(options, false, false)
@@ -680,0 +730,0 @@

src/utils/DateTime.js

@@ -24,17 +24,28 @@ import Utils from './Utils'
 
-  getUTCTimeStamp(dateStr) {
+  getTimeStamp(dateStr) {
     if (!Date.parse(dateStr)) {
       return dateStr
     }
-    return new Date(new Date(dateStr).toISOString().substr(0, 25)).getTime()
+    const utc = this.w.config.xaxis.labels.datetimeUTC
+    return !utc
+      ? new Date(dateStr).getTime()
+      : new Date(new Date(dateStr).toISOString().substr(0, 25)).getTime()
   }
 
+  getDate(timestamp) {
+    const utc = this.w.config.xaxis.labels.datetimeUTC
+
+    return utc
+      ? new Date(new Date(timestamp).toUTCString())
+      : new Date(timestamp)
+  }
+
   parseDate(dateStr) {
     const parsed = Date.parse(dateStr)
     if (!isNaN(parsed)) {
-      return this.getUTCTimeStamp(dateStr)
+      return this.getTimeStamp(dateStr)
     }
 
     let output = Date.parse(dateStr.replace(/-/g, '/').replace(/[a-z]+/gi, ' '))
-    output = this.getUTCTimeStamp(output)
+    output = this.getTimeStamp(output)
     return output
@@ -44,5 +55,7 @@ }
   // http://stackoverflow.com/questions/14638018/current-time-formatting-with-javascript#answer-14638191
-  formatDate(date, format, utc = true) {
+  formatDate(date, format) {
     const locale = this.w.globals.locale
 
+    const utc = this.w.config.xaxis.labels.datetimeUTC
+
     let MMMM = ['\x00', ...locale.months]
@@ -60,3 +73,3 @@ let MMM = ['\x01', ...locale.shortMonths]
 
-    let y = date.getUTCFullYear()
+    let y = utc ? date.getUTCFullYear() : date.getFullYear()
     format = format.replace(/(^|[^\\])yyyy+/g, '$1' + y)
@@ -66,3 +79,3 @@ format = format.replace(/(^|[^\\])yy/g, '$1' + y.toString().substr(2, 2))
 
-    let M = date.getUTCMonth() + 1
+    let M = (utc ? date.getUTCMonth() : date.getMonth()) + 1
     format = format.replace(/(^|[^\\])MMMM+/g, '$1' + MMMM[0])
@@ -73,3 +86,3 @@ format = format.replace(/(^|[^\\])MMM/g, '$1' + MMM[0])
 
-    let d = date.getUTCDate()
+    let d = utc ? date.getUTCDate() : date.getDate()
     format = format.replace(/(^|[^\\])dddd+/g, '$1' + dddd[0])
@@ -80,3 +93,3 @@ format = format.replace(/(^|[^\\])ddd/g, '$1' + ddd[0])
 
-    let H = date.getUTCHours()
+    let H = utc ? date.getUTCHours() : date.getHours()
     format = format.replace(/(^|[^\\])HH+/g, '$1' + ii(H))
@@ -89,11 +102,11 @@ format = format.replace(/(^|[^\\])H/g, '$1' + H)
 
-    let m = date.getUTCMinutes()
+    let m = utc ? date.getUTCMinutes() : date.getMinutes()
     format = format.replace(/(^|[^\\])mm+/g, '$1' + ii(m))
     format = format.replace(/(^|[^\\])m/g, '$1' + m)
 
-    let s = date.getUTCSeconds()
+    let s = utc ? date.getUTCSeconds() : date.getSeconds()
     format = format.replace(/(^|[^\\])ss+/g, '$1' + ii(s))
     format = format.replace(/(^|[^\\])s/g, '$1' + s)
 
-    let f = date.getUTCMilliseconds()
+    let f = utc ? date.getUTCMilliseconds() : date.getMilliseconds()
     format = format.replace(/(^|[^\\])fff+/g, '$1' + ii(f, 3))
@@ -116,5 +129,12 @@ f = Math.round(f / 10)
 
+    if (!utc) {
+      tz = Math.abs(tz)
+      let tzHrs = Math.floor(tz / 60)
+      let tzMin = tz % 60
+      K += ii(tzHrs) + ':' + ii(tzMin)
+    }
+
     format = format.replace(/(^|[^\\])K/g, '$1' + K)
 
-    let day = date.getUTCDay() + 1
+    let day = (utc ? date.getUTCDay() : date.getDay()) + 1
     format = format.replace(new RegExp(dddd[0], 'g'), dddd[day])
@@ -131,3 +151,3 @@ format = format.replace(new RegExp(ddd[0], 'g'), ddd[day])
 
-  getTimeUnitsfromTimestamp(minX, maxX) {
+  getTimeUnitsfromTimestamp(minX, maxX, utc) {
     let w = this.w
@@ -142,28 +162,19 @@
 
-    let minYear = new Date(minX).getUTCFullYear()
-    let maxYear = new Date(maxX).getUTCFullYear()
+    const tsMin = this.getDate(minX)
+    const tsMax = this.getDate(maxX)
 
-    let minMonth = new Date(minX).getUTCMonth()
-    let maxMonth = new Date(maxX).getUTCMonth()
+    const minD = this.formatDate(tsMin, 'yyyy MM dd HH mm').split(' ')
+    const maxD = this.formatDate(tsMax, 'yyyy MM dd HH mm').split(' ')
 
-    let minDate = new Date(minX).getUTCDate()
-    let maxDate = new Date(maxX).getUTCDate()
-
-    let minHour = new Date(minX).getUTCHours()
-    let maxHour = new Date(maxX).getUTCHours()
-
-    let minMinute = new Date(minX).getUTCMinutes()
-    let maxMinute = new Date(maxX).getUTCMinutes()
-
     return {
-      minMinute,
-      maxMinute,
-      minHour,
-      maxHour,
-      minDate,
-      maxDate,
-      minMonth,
-      maxMonth,
-      minYear,
-      maxYear
+      minMinute: parseInt(minD[4], 10),
+      maxMinute: parseInt(maxD[4], 10),
+      minHour: parseInt(minD[3], 10),
+      maxHour: parseInt(maxD[3], 10),
+      minDate: parseInt(minD[2], 10),
+      maxDate: parseInt(maxD[2], 10),
+      minMonth: parseInt(minD[1], 10) - 1,
+      maxMonth: parseInt(maxD[1], 10) - 1,
+      minYear: parseInt(minD[0], 10),
+      maxYear: parseInt(maxD[0], 10)
     }
@@ -170,0 +181,0 @@ }

src/utils/Utils.js

@@ -183,2 +183,11 @@ /*
 
+  static getLargestStringFromArr(arr) {
+    return arr.reduce((a, b) => {
+      if (Array.isArray(b)) {
+        b = b.reduce((aa, bb) => (aa.length > bb.length ? aa : bb))
+      }
+      return a.length > b.length ? a : b
+    }, 0)
+  }
+
   // http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb#answer-12342275
@@ -185,0 +194,0 @@ static hexToRgba(hex = '#999999', opacity = 0.6) {

types/apexcharts.d.ts

@@ -34,2 +34,3 @@ // Typescript declarations for Apex class and module.
   destroy(): void
+  setLocale(localeName: string): void
   paper(): void
@@ -137,2 +138,3 @@ addXaxisAnnotation(options: any, pushToMemory?: boolean, context?: any): void
   parentHeightOffset?: number
+  redrawOnParentResize?: boolean
   sparkline?: {
@@ -466,3 +468,4 @@ enabled?: boolean
           color?: string
-          offsetY?: number
+          offsetY?: number,
+          formatter?(val: string): string
         }
@@ -469,0 +472,0 @@ value?: {

No alert changes

Improved metrics

Total package byte prevSize

3703909

increased by0.65%

Dev dependency count

42

decreased by-2.33%

Number of package files

141

increased by4.44%

Lines of code

58123

increased by0.17%

Number of lines in readme file

257

increased by1.18%

No dependency changes