stacked bar overlap issue fix - fixes #507

apexcharts · Apr 14, 2019 · 158666e · 158666e
1 parent d601d96
commit 158666e
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 12 deletions.
diff --git a/src/charts/Bar.js b/src/charts/Bar.js
@@ -53,7 +53,8 @@ class Bar {
     this.series = series
     this.yRatio = coreUtils.getLogYRatios(this.yRatio)
 
-    this.initVariables(series)
+    let initVars = this.initVariables(series, this.minXDiff)
+    this.minXDiff = initVars.minXDiff
 
     let ret = graphics.group({
       class: 'apexcharts-bar-series apexcharts-plot-series'
@@ -335,7 +336,7 @@ class Bar {
     return elSeries
   }
 
-  initVariables(series) {
+  initVariables(series, minXDiff) {
     const w = this.w
     this.series = series
     this.totalItems = 0
@@ -354,7 +355,7 @@ class Bar {
           sX.forEach((s, j) => {
             if (j > 0) {
               let xDiff = s - w.globals.seriesX[i][j - 1]
-              this.minXDiff = Math.min(xDiff, this.minXDiff)
+              minXDiff = Math.min(xDiff, minXDiff)
             }
           })
         })
@@ -377,6 +378,10 @@ class Bar {
       // A small adjustment when combo charts are used
       this.seriesLen = 1
     }
+
+    return {
+      minXDiff
+    }
   }
 
   initialPositions() {
@@ -410,7 +415,7 @@ class Bar {
 
       if (w.globals.isXNumeric) {
         // max barwidth should be equal to minXDiff to avoid overlap
-        this.calcMinimumXDiff()
+        this.minXDiff = this.calcMinimumXDiff(this.minXDiff)
         xDivision = this.minXDiff / this.xRatio
         barWidth =
           ((xDivision / this.seriesLen) *
@@ -439,28 +444,27 @@ class Bar {
     }
   }
 
-  calcMinimumXDiff() {
+  calcMinimumXDiff(minXDiff) {
     const w = this.w
 
     let len = w.globals.labels.length
 
     if (w.globals.labels.length === 1) {
-      this.minXDiff = (w.globals.maxX - w.globals.minX) / len / 3
+      minXDiff = (w.globals.maxX - w.globals.minX) / len / 3
     } else {
-      if (this.minXDiff === Number.MAX_VALUE) {
+      if (minXDiff === Number.MAX_VALUE) {
         // possibly a single dataPoint (fixes react-apexcharts/issue#34)
         if (w.globals.timelineLabels.length > 0) {
           len = w.globals.timelineLabels.length
         }
-
         if (len < 3) {
           len = 3
         }
-        this.minXDiff = (w.globals.maxX - w.globals.minX) / len
+        minXDiff = (w.globals.maxX - w.globals.minX) / len
       }
     }
 
-    return this.minXDiff
+    return minXDiff
   }
 
   drawBarPaths({

diff --git a/src/charts/BarStacked.js b/src/charts/BarStacked.js
@@ -23,7 +23,10 @@ class BarStacked extends Bar {
     series = coreUtils.getLogSeries(series)
     this.yRatio = coreUtils.getLogYRatios(this.yRatio)
 
-    this.initVariables(series)
+    this.minXDiff = Number.MAX_VALUE
+
+    let initVars = this.initVariables(series, this.minXDiff)
+    this.minXDiff = initVars.minXDiff
 
     if (w.config.chart.stackType === '100%') {
       series = w.globals.seriesPercent.slice()
@@ -243,7 +246,7 @@ class BarStacked extends Bar {
       barWidth = xDivision
 
       if (w.globals.isXNumeric) {
-        this.minXDiff = this.bar.calcMinimumXDiff()
+        this.minXDiff = this.calcMinimumXDiff(this.minXDiff)
         // max barwidth should be equal to minXDiff to avoid overlap
         xDivision = this.minXDiff / this.xRatio
         barWidth = (xDivision * parseInt(this.barOptions.columnWidth)) / 100