Merge pull request apexcharts#4640 from rosco54/Issue_4632

Changes to accommodate issue 4632

samples/react/column/stacked-column-with-line-new.html

@@ -295,13 +295,19 @@
                   }
                 }
               },
+              // In order to align the ticks of multiple yaxes with the charts horizontal grid
+              // lines, the scaling of the first [unhidden] yaxis determines the number
+              // of grid lines and hence the number of ticks for all subsequent yaxes, unless
+              // they specify a tickAmount.
+              // We want the stacked bars to have the best possible resolution
+              // visually so they have been listed first.
               yaxis: [
                 {
-                  seriesName: 'Line',
-                  opposite: true
+                  seriesName: ['Bar1','Bar2','Bar3','bar4']
                 },
                 {
-                  seriesName: ['Bar1','Bar2','Bar3','bar4']
+                  seriesName: 'Line',
+                  opposite: true
                 }
               ],
               legend: {

samples/source/column/stacked-column-with-line-new.xml

@@ -76,13 +76,19 @@ xaxis: {
     }
   }
 },
+// In order to align the ticks of multiple yaxes with the charts horizontal grid
+// lines, the scaling of the first [unhidden] yaxis determines the number
+// of grid lines and hence the number of ticks for all subsequent yaxes, unless
+// they specify a tickAmount.
+// We want the stacked bars to have the best possible resolution
+// visually so they have been listed first.
 yaxis: [
   {
-    seriesName: 'Line',
-    opposite: true
+    seriesName: ['Bar1','Bar2','Bar3','bar4']
   },
   {
-    seriesName: ['Bar1','Bar2','Bar3','bar4']
+    seriesName: 'Line',
+    opposite: true
   }
 ],
 legend: {

samples/vanilla-js/column/stacked-column-with-line-new.html

@@ -278,13 +278,19 @@
             }
           }
         },
+        // In order to align the ticks of multiple yaxes with the charts horizontal grid
+        // lines, the scaling of the first [unhidden] yaxis determines the number
+        // of grid lines and hence the number of ticks for all subsequent yaxes, unless
+        // they specify a tickAmount.
+        // We want the stacked bars to have the best possible resolution
+        // visually so they have been listed first.
         yaxis: [
           {
-            seriesName: 'Line',
-            opposite: true
+            seriesName: ['Bar1','Bar2','Bar3','bar4']
           },
           {
-            seriesName: ['Bar1','Bar2','Bar3','bar4']
+            seriesName: 'Line',
+            opposite: true
           }
         ],
         legend: {

samples/vue/column/stacked-column-with-line-new.html

@@ -298,13 +298,19 @@
                 }
               }
             },
+            // In order to align the ticks of multiple yaxes with the charts horizontal grid
+            // lines, the scaling of the first [unhidden] yaxis determines the number
+            // of grid lines and hence the number of ticks for all subsequent yaxes, unless
+            // they specify a tickAmount.
+            // We want the stacked bars to have the best possible resolution
+            // visually so they have been listed first.
             yaxis: [
               {
-                seriesName: 'Line',
-                opposite: true
+                seriesName: ['Bar1','Bar2','Bar3','bar4']
               },
               {
-                seriesName: ['Bar1','Bar2','Bar3','bar4']
+                seriesName: 'Line',
+                opposite: true
               }
             ],
             legend: {

src/modules/Scales.js

@@ -29,6 +29,9 @@ export default class Scales {
       axisCnf = w.config.yaxis[index]
       maxTicks = Math.max((gl.svgHeight - 100) / 15, 2)
     }
+    if (!Utils.isNumber(maxTicks)) {
+      maxTicks = 10
+    }
     gotMin = axisCnf.min !== undefined && axisCnf.min !== null
     gotMax = axisCnf.max !== undefined && axisCnf.min !== null
     let gotStepSize =
@@ -37,8 +40,6 @@ export default class Scales {
       axisCnf.tickAmount !== undefined && axisCnf.tickAmount !== null
     let ticks = gotTickAmount
       ? axisCnf.tickAmount
-      : !axisCnf.forceNiceScale
-      ? 10
       : gl.niceScaleDefaultTicks[
           Math.min(
             Math.round(maxTicks / 2),
@@ -100,19 +101,17 @@ export default class Scales {
     // Determine Range
     let range = Math.abs(yMax - yMin)
 
-    if (axisCnf.forceNiceScale) {
-      // Snap min or max to zero if close
-      let proximityRatio = 0.15
-      if (!gotMin && yMin > 0 && yMin / range < proximityRatio) {
-        yMin = 0
-        gotMin = true
-      }
-      if (!gotMax && yMax < 0 && -yMax / range < proximityRatio) {
-        yMax = 0
-        gotMax = true
-      }
-      range = Math.abs(yMax - yMin)
+    // Snap min or max to zero if close
+    let proximityRatio = 0.15
+    if (!gotMin && yMin > 0 && yMin / range < proximityRatio) {
+      yMin = 0
+      gotMin = true
+    }
+    if (!gotMax && yMax < 0 && -yMax / range < proximityRatio) {
+      yMax = 0
+      gotMax = true
     }
+    range = Math.abs(yMax - yMin)
 
     // Calculate a pretty step value based on ticks
 
@@ -231,18 +230,25 @@ export default class Scales {
     } else {
       // Snap range to ticks
       if (!gotMin && !gotMax) {
-        if (gotTickAmount) {
-          // Allow a half-stepSize shift if series doesn't cross the X axis
-          // to ensure graph doesn't clip. Not if it does cross, in order
-          // to keep the 0 aligned with a grid line in multi axis charts.
-          let shift = stepSize / (yMax - yMin > yMax ? 1 : 2)
-          let tMin = shift * Math.floor(yMin / shift)
-          if (Math.abs(tMin - yMin) <= shift / 2) {
-            yMin = tMin
-            yMax = yMin + stepSize * tiks
-          } else {
-            yMax = shift * Math.ceil(yMax / shift)
-            yMin = yMax - stepSize * tiks
+        if (gl.isMultipleYAxis && gotTickAmount) {
+          // Ensure graph doesn't clip.
+          let tMin = stepSize * Math.floor(yMin / stepSize)
+          let tMax = tMin + stepSize * tiks
+          if (tMax < yMax) {
+            stepSize *= 2
+          }
+          yMin = tMin
+          tMax = yMax
+          yMax = yMin + stepSize * tiks
+          // Snap min or max to zero if possible
+          range = Math.abs(yMax - yMin)
+          if (yMin > 0 && yMin < Math.abs(tMax - yMax)) {
+            yMin = 0
+            yMax = stepSize * tiks
+          }
+          if (yMax < 0 && -yMax < Math.abs(tMin - yMin)) {
+            yMax = 0
+            yMin = -stepSize * tiks
           }
         } else {
           yMin = stepSize * Math.floor(yMin / stepSize)
@@ -297,9 +303,9 @@ export default class Scales {
     }
 
     // Prune tiks down to range if series is all integers. Since tiks > range,
-    // range is very low (< 10 or so). Skip this step if tickAmount is true
-    // because, either the user set it, or the chart is multiscale and this
-    // axis is not determining the number of grid lines.
+    // range is very low (< 10 or so). Skip this step if gotTickAmount is true
+    // because either the user set tickAmount or the chart is multiscale and
+    // this axis is not determining the number of grid lines.
     if (
       !gotTickAmount &&
       axisCnf.forceNiceScale &&

tests/unit/exponential-data.spec.js

@@ -72,6 +72,9 @@ describe('Exponential values should parse', () => {
           ]
         }
       ],
+      yaxis: {
+        tickAmount: 10
+      },
       xaxis: {
         type: 'datetime'
       }

tests/unit/small-range.spec.js

@@ -139,6 +139,7 @@ describe('yaxis scale to ignore duplication if fractions are present in series',
         ],
       },
       yaxis: {
+        tickAmount: 8,
         labels: {
           formatter: (val) => {
             return val.toFixed(2)