diff --git a/src/plots/cartesian/axis_defaults.js b/src/plots/cartesian/axis_defaults.js index c1fbf92f9ea..5dec11fec88 100644 --- a/src/plots/cartesian/axis_defaults.js +++ b/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 }); diff --git a/src/plots/cartesian/layout_defaults.js b/src/plots/cartesian/layout_defaults.js index 3e411ae0574..515b30fa138 100644 --- a/src/plots/cartesian/layout_defaults.js +++ b/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, diff --git a/src/plots/cartesian/line_grid_defaults.js b/src/plots/cartesian/line_grid_defaults.js index 18fd9974134..2ed89aff7c4 100644 --- a/src/plots/cartesian/line_grid_defaults.js +++ b/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) { diff --git a/test/image/baselines/hide_gridline-template_color.png b/test/image/baselines/hide_gridline-template_color.png new file mode 100644 index 00000000000..49023fb0667 Binary files /dev/null and b/test/image/baselines/hide_gridline-template_color.png differ diff --git a/test/image/mocks/hide_gridline-template_color.json b/test/image/mocks/hide_gridline-template_color.json new file mode 100644 index 00000000000..a412a1ded05 --- /dev/null +++ b/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 + } + } + } + } +} diff --git a/test/jasmine/tests/mock_test.js b/test/jasmine/tests/mock_test.js index eb7abbbfa29..169323a3c52 100644 --- a/test/jasmine/tests/mock_test.js +++ b/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');