Merge branch 'apexcharts:main' into main

src/apexcharts.js

@@ -267,24 +267,9 @@ export default class ApexCharts {
 
       if (w.config.grid.position === 'back' && elgrid) {
         w.globals.dom.elGraphical.add(elgrid.el)
-      }
-
-      let xAxis = new XAxis(this.ctx, elgrid)
-      let yaxis = new YAxis(this.ctx, elgrid)
-      if (elgrid !== null) {
-        xAxis.xAxisLabelCorrections(elgrid.xAxisTickWidth)
-        yaxis.setYAxisTextAlignments()
-
-        w.config.yaxis.map((yaxe, index) => {
-          if (w.globals.ignoreYAxisIndexes.indexOf(index) === -1) {
-            yaxis.yAxisTitleRotate(index, yaxe.opposite)
-          }
-        })
-      }
-
-      if (w.config.annotations.position === 'back') {
-        w.globals.dom.Paper.add(w.globals.dom.elAnnotations)
-        me.annotations.drawAxesAnnotations()
+        if (elgrid && elgrid.elGridBorders && elgrid.elGridBorders.node) {
+          w.globals.dom.elGraphical.add(elgrid.elGridBorders)
+        }
       }
 
       if (Array.isArray(graphData.elGraph)) {
@@ -297,10 +282,9 @@ export default class ApexCharts {
 
       if (w.config.grid.position === 'front' && elgrid) {
         w.globals.dom.elGraphical.add(elgrid.el)
-      }
-
-      if (elgrid && elgrid.elGridBorders && elgrid.elGridBorders.node) {
-        w.globals.dom.elGraphical.add(elgrid.elGridBorders)
+        if (elgrid && elgrid.elGridBorders && elgrid.elGridBorders.node) {
+          w.globals.dom.elGraphical.add(elgrid.elGridBorders)
+        }
       }
 
       if (w.config.xaxis.crosshairs.position === 'front') {
@@ -320,6 +304,24 @@ export default class ApexCharts {
         me.axes.drawAxis(w.config.chart.type, elgrid)
       }
 
+      let xAxis = new XAxis(this.ctx, elgrid)
+      let yaxis = new YAxis(this.ctx, elgrid)
+      if (elgrid !== null) {
+        xAxis.xAxisLabelCorrections(elgrid.xAxisTickWidth)
+        yaxis.setYAxisTextAlignments()
+
+        w.config.yaxis.map((yaxe, index) => {
+          if (w.globals.ignoreYAxisIndexes.indexOf(index) === -1) {
+            yaxis.yAxisTitleRotate(index, yaxe.opposite)
+          }
+        })
+      }
+
+      if (w.config.annotations.position === 'back') {
+        w.globals.dom.Paper.add(w.globals.dom.elAnnotations)
+        me.annotations.drawAxesAnnotations()
+      }
+
       if (!w.globals.noData) {
         // draw tooltips at the end
         if (w.config.tooltip.enabled && !w.globals.noData) {

src/charts/BarStacked.js

@@ -449,7 +449,6 @@ class BarStacked extends Bar {
         this.prevYF[0].every((val) => val === 0) &&
         this.prevYF.slice(1, i).every((arr) => arr.every((val) => isNaN(val)))
       ) {
-        // Use the same calc way as line #485
         barYPosition = zeroH
       } else {
         // Nothing special
@@ -460,11 +459,18 @@ class BarStacked extends Bar {
       barYPosition = zeroH
     }
 
-    y =
-      barYPosition -
-      this.series[i][j] / this.yRatio[this.yaxisIndex] +
-      (this.isReversed ? this.series[i][j] / this.yRatio[this.yaxisIndex] : 0) *
-        2
+    if (this.series[i][j]) {
+      y =
+        barYPosition -
+        this.series[i][j] / this.yRatio[this.yaxisIndex] +
+        (this.isReversed
+          ? this.series[i][j] / this.yRatio[this.yaxisIndex]
+          : 0) *
+          2
+    } else {
+      // fixes #3610
+      y = barYPosition
+    }
 
     const paths = this.barHelpers.getColumnPaths({
       barXPosition,

src/modules/axes/Axes.js

@@ -31,6 +31,12 @@ export default class Axes {
           if (gl.ignoreYAxisIndexes.indexOf(index) === -1) {
             elYaxis = yAxis.drawYaxis(index)
             gl.dom.Paper.add(elYaxis)
+
+            if (this.w.config.grid.position === 'back') {
+              const inner = gl.dom.Paper.children()[1]
+              inner.remove()
+              gl.dom.Paper.add(inner)
+            }
           }
         })
       }

src/modules/settings/Defaults.js

@@ -1,20 +1,29 @@
 import Utils from '../../utils/Utils'
 import DateTime from '../../utils/DateTime'
+import Formatters from '../Formatters'
 
 /**
  * ApexCharts Default Class for setting default options for all chart types.
  *
  * @module Defaults
  **/
 
-const getRangeValues = ({ ctx, seriesIndex, dataPointIndex, y1, y2, w }) => {
+const getRangeValues = ({
+  isTimeline,
+  ctx,
+  seriesIndex,
+  dataPointIndex,
+  y1,
+  y2,
+  w
+}) => {
   let start = w.globals.seriesRangeStart[seriesIndex][dataPointIndex]
   let end = w.globals.seriesRangeEnd[seriesIndex][dataPointIndex]
   let ylabel = w.globals.labels[dataPointIndex]
   let seriesName = w.config.series[seriesIndex].name
     ? w.config.series[seriesIndex].name
     : ''
-  const yLbFormatter = w.config.tooltip.y.formatter
+  const yLbFormatter = w.globals.ttKeyFormatter
   const yLbTitleFormatter = w.config.tooltip.y.title.formatter
 
   const opts = {
@@ -29,7 +38,18 @@ const getRangeValues = ({ ctx, seriesIndex, dataPointIndex, y1, y2, w }) => {
     seriesName = yLbTitleFormatter(seriesName, opts)
   }
   if (w.config.series[seriesIndex].data[dataPointIndex]?.x) {
-    ylabel = w.config.series[seriesIndex].data[dataPointIndex].x + ':'
+    ylabel = w.config.series[seriesIndex].data[dataPointIndex].x
+  }
+
+  if (!isTimeline) {
+    if (w.config.xaxis.type === 'datetime') {
+      let xFormat = new Formatters(ctx)
+      ylabel = xFormat.xLabelFormat(w.globals.ttKeyFormatter, ylabel, ylabel, {
+        i: undefined,
+        dateFormatter: new DateTime(ctx).formatDate,
+        w
+      })
+    }
   }
 
   if (typeof yLbFormatter === 'function') {
@@ -113,7 +133,7 @@ const buildRangeTooltipHTML = (opts) => {
     '</span></div>' +
     '<div> <span class="category">' +
     ylabel +
-    ' </span> ' +
+    ': </span> ' +
     valueHTML +
     ' </div>' +
     '</div>'
@@ -348,9 +368,10 @@ export default class Defaults {
 
   rangeBar() {
     const handleTimelineTooltip = (opts) => {
-      const { color, seriesName, ylabel, startVal, endVal } = getRangeValues(
-        opts
-      )
+      const { color, seriesName, ylabel, startVal, endVal } = getRangeValues({
+        ...opts,
+        isTimeline: true
+      })
       return buildRangeTooltipHTML({
         ...opts,
         color,

src/modules/tooltip/Labels.js

@@ -127,14 +127,14 @@ export default class Labels {
           }
         } else {
           // get a color from a hover area (if it's a line pattern then get from a first line)
-          const targetFill = e?.target?.getAttribute('fill');
+          const targetFill = e?.target?.getAttribute('fill')
           if (targetFill) {
-            pColor = (targetFill.indexOf("url") !== -1) ? (
-              document
-                .querySelector(targetFill.substr(4).slice(0, -1))
-                .childNodes[0]
-                .getAttribute("stroke")
-            ) : targetFill;
+            pColor =
+              targetFill.indexOf('url') !== -1
+                ? document
+                    .querySelector(targetFill.substr(4).slice(0, -1))
+                    .childNodes[0].getAttribute('stroke')
+                : targetFill
           }
           val = getValBySeriesIndex(i)
           if (hasGoalValues(i) && Array.isArray(w.globals.seriesGoals[i][j])) {
@@ -207,14 +207,14 @@ export default class Labels {
       if (w.globals.yLabelFormatters[0]) {
         yLbFormatter = w.globals.yLabelFormatters[0]
       } else {
-        yLbFormatter = function (label) {
+        yLbFormatter = function(label) {
           return label
         }
       }
     }
 
     if (typeof yLbTitleFormatter !== 'function') {
-      yLbTitleFormatter = function (label) {
+      yLbTitleFormatter = function(label) {
         return label
       }
     }