Merge pull request #4189 from plotly/zeroline-visible-when-no-gridlines

Show zeroline even when no grid lines are present

Author: etpinard

Diff for: src/plots/cartesian/axes.js

@@ -2749,7 +2749,6 @@ axes.shouldShowZeroLine = function(gd, ax, counterAxis) {
         (rng[0] * rng[1] <= 0) &&
         ax.zeroline &&
         (ax.type === 'linear' || ax.type === '-') &&
-        ax._gridVals.length &&
         (
             clipEnds(ax, 0) ||
             !anyCounterAxLineAtZero(gd, ax, counterAxis, rng) ||

Diff for: src/traces/splom/base_plot.js

@@ -124,8 +124,8 @@ function makeGridData(gd) {
         var sp = fullLayout._plots[k];
         var xa = sp.xaxis;
         var ya = sp.yaxis;
-        var xVals = xa._vals;
-        var yVals = ya._vals;
+        var xVals = xa._gridVals;
+        var yVals = ya._gridVals;
         // ya.l2p assumes top-to-bottom coordinate system (a la SVG),
         // we need to compute bottom-to-top offsets and slopes:
         var yOffset = gs.b + ya.domain[0] * gs.h;

Diff for: test/jasmine/tests/axes_test.js

@@ -447,9 +447,9 @@ describe('Test axes', function() {
 
         it('should use \'axis.color\' as default for \'axis.zerolinecolor\'', function() {
             layoutIn = {
-                xaxis: { showzeroline: true, color: 'red' },
+                xaxis: { zeroline: true, color: 'red' },
                 yaxis: { zerolinecolor: 'blue' },
-                yaxis2: { showzeroline: true }
+                yaxis2: { zeroline: true }
             };
             layoutOut._subplots.cartesian.push('xy2');
             layoutOut._subplots.yaxis.push('y2');
@@ -3491,8 +3491,8 @@ describe('Test axes', function() {
 
         it('works with a single subplot', function(done) {
             Plotly.newPlot(gd, [{x: [1, 2, 3], y: [1, 2, 3]}], {
-                xaxis: {range: [0, 4], showzeroline: true, showline: true},
-                yaxis: {range: [0, 4], showzeroline: true, showline: true},
+                xaxis: {range: [0, 4], zeroline: true, showline: true},
+                yaxis: {range: [0, 4], zeroline: true, showline: true},
                 width: 600,
                 height: 600
             })
@@ -3530,6 +3530,17 @@ describe('Test axes', function() {
             })
             .then(function() {
                 assertZeroLines(['x', 'y']);
+                return Plotly.relayout(gd, {
+                    'xaxis.showline': false, 'xaxis.nticks': 1, 'xaxis.range': [0, 0.1],
+                    'yaxis.showline': false, 'yaxis.nticks': 2, 'yaxis.range': [0, 0.1]
+                });
+            })
+            .then(function() {
+                // no grid lines, but still should show zeroline in this case
+                // see https://github.com/plotly/plotly.js/issues/4027
+                expect(gd._fullLayout.xaxis._gridVals.length).toBe(0, '# of grid lines');
+                expect(gd._fullLayout.xaxis._gridVals.length).toBe(0, '# of grid lines');
+                assertZeroLines(['x', 'y']);
             })
             .catch(failTest)
             .then(done);
@@ -3541,10 +3552,10 @@ describe('Test axes', function() {
                 {x: [1, 2, 3], y: [1, 2, 3], xaxis: 'x2'},
                 {x: [1, 2, 3], y: [1, 2, 3], yaxis: 'y2'}
             ], {
-                xaxis: {range: [0, 4], showzeroline: true, domain: [0, 0.4]},
-                yaxis: {range: [0, 4], showzeroline: true, domain: [0, 0.4]},
-                xaxis2: {range: [0, 4], showzeroline: true, domain: [0.6, 1]},
-                yaxis2: {range: [0, 4], showzeroline: true, domain: [0.6, 1]},
+                xaxis: {range: [0, 4], zeroline: true, domain: [0, 0.4]},
+                yaxis: {range: [0, 4], zeroline: true, domain: [0, 0.4]},
+                xaxis2: {range: [0, 4], zeroline: true, domain: [0.6, 1]},
+                yaxis2: {range: [0, 4], zeroline: true, domain: [0.6, 1]},
                 width: 600,
                 height: 600
             })
@@ -3575,10 +3586,10 @@ describe('Test axes', function() {
                 {x: [1, 2, 3], y: [1, 2, 3]},
                 {x: [1, 2, 3], y: [1, 2, 3], xaxis: 'x2', yaxis: 'y2'}
             ], {
-                xaxis: {range: [0, 4], showzeroline: true},
-                yaxis: {range: [0, 4], showzeroline: true},
-                xaxis2: {range: [0, 4], showzeroline: true, side: 'top', overlaying: 'x'},
-                yaxis2: {range: [0, 4], showzeroline: true, side: 'right', overlaying: 'y'},
+                xaxis: {range: [0, 4], zeroline: true},
+                yaxis: {range: [0, 4], zeroline: true},
+                xaxis2: {range: [0, 4], zeroline: true, side: 'top', overlaying: 'x'},
+                yaxis2: {range: [0, 4], zeroline: true, side: 'right', overlaying: 'y'},
                 width: 600,
                 height: 600
             })

Diff for: test/jasmine/tests/splom_test.js

@@ -702,26 +702,26 @@ describe('Test splom interactions:', function() {
         }
 
         Plotly.plot(gd, fig).then(function() {
-            _assert([1198, 16678, 3358, 118]);
+            _assert([1198, 16558, 3358, 118]);
             return Plotly.restyle(gd, 'showupperhalf', false);
         })
         .then(function() {
-            _assert([1198, 8488, 1768, 4]);
+            _assert([1198, 8476, 1768, 4]);
             return Plotly.restyle(gd, 'diagonal.visible', false);
         })
         .then(function() {
-            _assert([1138, 7654, 1600]);
+            _assert([1138, 7534, 1600]);
             return Plotly.restyle(gd, {
                 showupperhalf: true,
                 showlowerhalf: false
             });
         })
         .then(function() {
-            _assert([8188, 112, 1588]);
+            _assert([7966, 112, 1588]);
             return Plotly.restyle(gd, 'diagonal.visible', true);
         })
         .then(function() {
-            _assert([58, 9022, 1756, 118]);
+            _assert([58, 8908, 1756, 118]);
             return Plotly.relayout(gd, {
                 'xaxis.gridcolor': null,
                 'xaxis.gridwidth': null,
@@ -732,7 +732,7 @@ describe('Test splom interactions:', function() {
         .then(function() {
             // one batch for all 'grid' lines
             // and another for all 'zeroline' lines
-            _assert([9082, 1876]);
+            _assert([8968, 1876]);
         })
         .catch(failTest)
         .then(done);