Keep hidden grid lines of oriented traces when color is defined by template

src/plots/cartesian/axis_defaults.js

@@ -99,6 +99,7 @@ module.exports = function handleAxisDefaults(containerIn, containerOut, coerce,
         dfltColor: dfltColor,
         bgColor: options.bgColor,
         showGrid: options.showGrid,
+        hideGrid: options.hideGrid,
         attributes: layoutAttributes
     });
 

src/plots/cartesian/layout_defaults.js

@@ -239,6 +239,7 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, fullData) {
             letter: axLetter,
             font: layoutOut.font,
             outerTicks: outerTicks[axName],
+            hideGrid: noGrids[axName],
             showGrid: !noGrids[axName],
             data: ax2traces[axName] || [],
             bgColor: bgColor,
@@ -303,6 +304,7 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, fullData) {
             letter: axLetter,
             font: layoutOut.font,
             outerTicks: outerTicks[axName],
+            hideGrid: noGrids[axName],
             showGrid: !noGrids[axName],
             data: [],
             bgColor: bgColor,

src/plots/cartesian/line_grid_defaults.js

@@ -31,6 +31,18 @@ module.exports = function handleLineGridDefaults(containerIn, containerOut, coer
         return Lib.coerce2(containerIn, containerOut, opts.attributes, attr, dflt);
     }
 
+    function _coerce(attr, dflt) {
+        var val = coerce2(attr, dflt);
+
+        if(
+            val && opts.hideGrid &&
+            containerOut[attr] !== containerIn[attr] &&
+            containerOut[attr] === containerOut._template[attr]
+        ) return false;
+
+        return val;
+    }
+
     var lineColor = coerce2('linecolor', dfltColor);
     var lineWidth = coerce2('linewidth');
     var showLine = coerce('showline', opts.showLine || !!lineColor || !!lineWidth);
@@ -41,8 +53,8 @@ module.exports = function handleLineGridDefaults(containerIn, containerOut, coer
     }
 
     var gridColorDflt = colorMix(dfltColor, opts.bgColor, opts.blend || lightFraction).toRgbString();
-    var gridColor = coerce2('gridcolor', gridColorDflt);
-    var gridWidth = coerce2('gridwidth');
+    var gridColor = _coerce('gridcolor', gridColorDflt);
+    var gridWidth = _coerce('gridwidth');
     var showGridLines = coerce('showgrid', opts.showGrid || !!gridColor || !!gridWidth);
 
     if(!showGridLines) {
@@ -51,8 +63,8 @@ module.exports = function handleLineGridDefaults(containerIn, containerOut, coer
     }
 
     if(!opts.noZeroLine) {
-        var zeroLineColor = coerce2('zerolinecolor', dfltColor);
-        var zeroLineWidth = coerce2('zerolinewidth');
+        var zeroLineColor = _coerce('zerolinecolor', dfltColor);
+        var zeroLineWidth = _coerce('zerolinewidth');
         var showZeroLine = coerce('zeroline', opts.showGrid || !!zeroLineColor || !!zeroLineWidth);
 
         if(!showZeroLine) {

test/image/mocks/hide_gridline-template_color.json

@@ -0,0 +1,70 @@
+{
+    "data": [
+        {
+            "type": "scatter",
+            "marker": { "color": "blue" },
+            "x": [-1, 1],
+            "y": [-1, 1]
+        },
+        {
+            "type": "bar",
+            "marker": { "color": "rgba(127,127,127,0.5)" },
+            "y": [-1, 1],
+            "xaxis": "x2",
+            "yaxis": "y2"
+        },
+        {
+            "type": "bar",
+            "marker": { "color": "rgba(127,127,127,0.5)" },
+            "x": [-1, 1],
+            "xaxis": "x3",
+            "yaxis": "y3"
+        },
+        {
+            "type": "bar",
+            "marker": { "color": "rgba(127,127,127,0.5)" },
+            "y": [-1, 1],
+            "xaxis": "x4",
+            "yaxis": "y4"
+        },
+        {
+            "type": "scatter",
+            "marker": { "color": "blue" },
+            "x": [-1, 1],
+            "y": [-1, 1],
+            "xaxis": "x4",
+            "yaxis": "y4"
+        }
+    ],
+    "layout": {
+        "title": {
+            "text": "hide grid lines for oriented traces"
+        },
+        "showlegend": false,
+        "width": 600,
+        "height": 600,
+        "grid": {
+            "rows": 2,
+            "columns": 2,
+            "xgap": 0.2,
+            "ygap": 0.2,
+            "pattern": "independent"
+        },
+        "template": {
+            "layout": {
+                "xaxis": {
+                    "gridcolor": "red",
+                    "gridwidth": 2,
+                    "zerolinecolor": "orange",
+                    "zerolinewidth": 5
+                },
+                "yaxis": {
+                    "gridcolor": "red",
+                    "gridwidth": 2,
+                    "zerolinecolor": "orange",
+                    "zerolinewidth": 5
+                }
+            }
+        }
+    }
+}

test/jasmine/tests/mock_test.js

@@ -596,6 +596,7 @@ var list = [
     'heatmap_xyz-gaps-on-sides',
     'heatmap-reverse-autocolorscale',
     'heatmap-with-zero-category',
+    'hide_gridline-template_color',
     'hist_0_to_093',
     'hist_0_to_1_midpoints',
     'hist_003_to_093',
@@ -1639,6 +1640,7 @@ figs['heatmap_xyz-dates-and-categories'] = require('@mocks/heatmap_xyz-dates-and
 figs['heatmap_xyz-gaps-on-sides'] = require('@mocks/heatmap_xyz-gaps-on-sides');
 figs['heatmap-reverse-autocolorscale'] = require('@mocks/heatmap-reverse-autocolorscale');
 figs['heatmap-with-zero-category'] = require('@mocks/heatmap-with-zero-category');
+figs['hide_gridline-template_color'] = require('@mocks/hide_gridline-template_color');
 figs['hist_0_to_093'] = require('@mocks/hist_0_to_093');
 figs['hist_0_to_1_midpoints'] = require('@mocks/hist_0_to_1_midpoints');
 figs['hist_003_to_093'] = require('@mocks/hist_003_to_093');