diff --git a/src/components/legend/style.js b/src/components/legend/style.js
index 85c222e4671..6a8e8c650d3 100644
--- a/src/components/legend/style.js
+++ b/src/components/legend/style.js
@@ -14,6 +14,7 @@ var Registry = require('../../registry');
 var Lib = require('../../lib');
 var Drawing = require('../drawing');
 var Color = require('../color');
+var extractOpts = require('../colorscale/helpers').extractOpts;
 
 var subTypes = require('../../traces/scatter/subtypes');
 var stylePie = require('../../traces/pie/style_one');
@@ -30,7 +31,7 @@ module.exports = function style(s, gd) {
     var legend = fullLayout.legend;
     var constantItemSizing = legend.itemsizing === 'constant';
 
-    function boundLineWidth(mlw, cont, max, cst) {
+    var boundLineWidth = function(mlw, cont, max, cst) {
         var v;
         if(mlw + 1) {
             v = mlw;
@@ -40,7 +41,7 @@ module.exports = function style(s, gd) {
             return 0;
         }
         return constantItemSizing ? cst : Math.min(v, max);
-    }
+    };
 
     s.each(function(d) {
         var traceGroup = d3.select(this);
@@ -104,6 +105,29 @@ module.exports = function style(s, gd) {
         var showGradientFill = false;
         var dMod, tMod;
 
+        var cOpts = extractOpts(trace);
+        var colorscale = cOpts.colorscale;
+        var reversescale = cOpts.reversescale;
+
+        var fillGradient = function(s) {
+            if(s.size()) {
+                var gradientID = 'legendfill-' + trace.uid;
+                Drawing.gradient(s, gd, gradientID,
+                    getGradientDirection(reversescale),
+                    colorscale, 'fill');
+            }
+        };
+
+        var lineGradient = function(s) {
+            if(s.size()) {
+                var gradientID = 'legendline-' + trace.uid;
+                Drawing.lineGroupStyle(s);
+                Drawing.gradient(s, gd, gradientID,
+                    getGradientDirection(reversescale),
+                    colorscale, 'stroke');
+            }
+        };
+
         if(contours) {
             var coloring = contours.coloring;
 
@@ -158,23 +182,6 @@ module.exports = function style(s, gd) {
         // This issue (and workaround) exist across (Mac) Chrome, FF, and Safari
         line.attr('d', pathStart + (showGradientLine ? 'l30,0.0001' : 'h30'))
             .call(showLine ? Drawing.lineGroupStyle : lineGradient);
-
-        function fillGradient(s) {
-            if(s.size()) {
-                var gradientID = 'legendfill-' + trace.uid;
-                Drawing.gradient(s, gd, gradientID, 'horizontalreversed',
-                    trace.colorscale, 'fill');
-            }
-        }
-
-        function lineGradient(s) {
-            if(s.size()) {
-                var gradientID = 'legendline-' + trace.uid;
-                Drawing.lineGroupStyle(s);
-                Drawing.gradient(s, gd, gradientID, 'horizontalreversed',
-                    trace.colorscale, 'stroke');
-            }
-        }
     }
 
     function stylePoints(d) {
@@ -278,7 +285,7 @@ module.exports = function style(s, gd) {
         var trace = d[0].trace;
 
         var ptsData = [];
-        if(trace.type === 'waterfall' && trace.visible) {
+        if(trace.visible && trace.type === 'waterfall') {
             ptsData = d[0].hasTotals ?
                 [['increasing', 'M-6,-6V6H0Z'], ['totals', 'M6,6H0L-6,-6H-0Z'], ['decreasing', 'M6,6V-6H0Z']] :
                 [['increasing', 'M-6,-6V6H6Z'], ['decreasing', 'M6,6V-6H-6Z']];
@@ -321,7 +328,7 @@ module.exports = function style(s, gd) {
         var markerLine = marker.line || {};
 
         var isVisible = (!desiredType) ? Registry.traceIs(trace, 'bar') :
-            (trace.type === desiredType && trace.visible);
+            (trace.visible && trace.type === desiredType);
 
         var barpath = d3.select(lThis).select('g.legendpoints')
             .selectAll('path.legend' + desiredType)
@@ -348,7 +355,7 @@ module.exports = function style(s, gd) {
 
         var pts = d3.select(this).select('g.legendpoints')
             .selectAll('path.legendbox')
-            .data(Registry.traceIs(trace, 'box-violin') && trace.visible ? [d] : []);
+            .data(trace.visible && Registry.traceIs(trace, 'box-violin') ? [d] : []);
         pts.enter().append('path').classed('legendbox', true)
             // if we want the median bar, prepend M6,0H-6
             .attr('d', 'M6,6H-6V-6H6Z')
@@ -386,7 +393,7 @@ module.exports = function style(s, gd) {
 
         var pts = d3.select(this).select('g.legendpoints')
             .selectAll('path.legendcandle')
-            .data(trace.type === 'candlestick' && trace.visible ? [d, d] : []);
+            .data(trace.visible && trace.type === 'candlestick' ? [d, d] : []);
         pts.enter().append('path').classed('legendcandle', true)
             .attr('d', function(_, i) {
                 if(i) return 'M-15,0H-8M-8,6V-6H8Z'; // increasing
@@ -413,7 +420,7 @@ module.exports = function style(s, gd) {
 
         var pts = d3.select(this).select('g.legendpoints')
             .selectAll('path.legendohlc')
-            .data(trace.type === 'ohlc' && trace.visible ? [d, d] : []);
+            .data(trace.visible && trace.type === 'ohlc' ? [d, d] : []);
         pts.enter().append('path').classed('legendohlc', true)
             .attr('d', function(_, i) {
                 if(i) return 'M-15,0H0M-8,-6V0'; // increasing
@@ -448,7 +455,7 @@ module.exports = function style(s, gd) {
         var trace = d0.trace;
 
         var isVisible = (!desiredType) ? Registry.traceIs(trace, desiredType) :
-            (trace.type === desiredType && trace.visible);
+            (trace.visible && trace.type === desiredType);
 
         var pts = d3.select(lThis).select('g.legendpoints')
             .selectAll('path.legend' + desiredType)
@@ -472,3 +479,7 @@ module.exports = function style(s, gd) {
         }
     }
 };
+
+function getGradientDirection(reversescale) {
+    return reversescale ? 'horizontal' : 'horizontalreversed';
+}
diff --git a/src/traces/choropleth/attributes.js b/src/traces/choropleth/attributes.js
index 16a3712413a..8186cb54b17 100644
--- a/src/traces/choropleth/attributes.js
+++ b/src/traces/choropleth/attributes.js
@@ -11,7 +11,7 @@
 var hovertemplateAttrs = require('../../plots/template_attributes').hovertemplateAttrs;
 var scatterGeoAttrs = require('../scattergeo/attributes');
 var colorScaleAttrs = require('../../components/colorscale/attributes');
-var plotAttrs = require('../../plots/attributes');
+var baseAttrs = require('../../plots/attributes');
 var defaultLine = require('../../components/color/attributes').defaultLine;
 
 var extendFlat = require('../../lib/extend').extendFlat;
@@ -73,11 +73,11 @@ module.exports = extendFlat({
         editType: 'plot'
     },
 
-    hoverinfo: extendFlat({}, plotAttrs.hoverinfo, {
+    hoverinfo: extendFlat({}, baseAttrs.hoverinfo, {
         editType: 'calc',
         flags: ['location', 'z', 'text', 'name']
     }),
-    hovertemplate: hovertemplateAttrs(),
+    hovertemplate: hovertemplateAttrs()
 },
 
     colorScaleAttrs('', {
diff --git a/src/traces/densitymapbox/attributes.js b/src/traces/densitymapbox/attributes.js
index c37046b1f76..3d1ffc03975 100644
--- a/src/traces/densitymapbox/attributes.js
+++ b/src/traces/densitymapbox/attributes.js
@@ -10,7 +10,7 @@
 
 var colorScaleAttrs = require('../../components/colorscale/attributes');
 var hovertemplateAttrs = require('../../plots/template_attributes').hovertemplateAttrs;
-var plotAttrs = require('../../plots/attributes');
+var baseAttrs = require('../../plots/attributes');
 var scatterMapboxAttrs = require('../scattermapbox/attributes');
 
 var extendFlat = require('../../lib/extend').extendFlat;
@@ -81,7 +81,7 @@ module.exports = extendFlat({
     text: scatterMapboxAttrs.text,
     hovertext: scatterMapboxAttrs.hovertext,
 
-    hoverinfo: extendFlat({}, plotAttrs.hoverinfo, {
+    hoverinfo: extendFlat({}, baseAttrs.hoverinfo, {
         flags: ['lon', 'lat', 'z', 'text', 'name']
     }),
     hovertemplate: hovertemplateAttrs()
diff --git a/src/traces/funnel/attributes.js b/src/traces/funnel/attributes.js
index c21d05865a7..60a8a9b2640 100644
--- a/src/traces/funnel/attributes.js
+++ b/src/traces/funnel/attributes.js
@@ -10,7 +10,7 @@
 
 var barAttrs = require('../bar/attributes');
 var lineAttrs = require('../scatter/attributes').line;
-var plotAttrs = require('../../plots/attributes');
+var baseAttrs = require('../../plots/attributes');
 var hovertemplateAttrs = require('../../plots/template_attributes').hovertemplateAttrs;
 var texttemplateAttrs = require('../../plots/template_attributes').texttemplateAttrs;
 var constants = require('./constants');
@@ -30,7 +30,7 @@ module.exports = {
         keys: constants.eventDataKeys
     }),
 
-    hoverinfo: extendFlat({}, plotAttrs.hoverinfo, {
+    hoverinfo: extendFlat({}, baseAttrs.hoverinfo, {
         flags: ['name', 'x', 'y', 'text', 'percent initial', 'percent previous', 'percent total']
     }),
 
diff --git a/src/traces/funnelarea/attributes.js b/src/traces/funnelarea/attributes.js
index d0bc5dbed7b..cc3dde59d88 100644
--- a/src/traces/funnelarea/attributes.js
+++ b/src/traces/funnelarea/attributes.js
@@ -9,7 +9,7 @@
 'use strict';
 
 var pieAttrs = require('../pie/attributes');
-var plotAttrs = require('../../plots/attributes');
+var baseAttrs = require('../../plots/attributes');
 var domainAttrs = require('../../plots/domain').attributes;
 var hovertemplateAttrs = require('../../plots/template_attributes').hovertemplateAttrs;
 var texttemplateAttrs = require('../../plots/template_attributes').texttemplateAttrs;
@@ -58,7 +58,7 @@ module.exports = {
         keys: ['label', 'color', 'value', 'text', 'percent']
     }),
 
-    hoverinfo: extendFlat({}, plotAttrs.hoverinfo, {
+    hoverinfo: extendFlat({}, baseAttrs.hoverinfo, {
         flags: ['label', 'text', 'value', 'percent', 'name']
     }),
 
diff --git a/src/traces/image/attributes.js b/src/traces/image/attributes.js
index ac193e559a0..48ac658cfeb 100644
--- a/src/traces/image/attributes.js
+++ b/src/traces/image/attributes.js
@@ -8,7 +8,7 @@
 
 'use strict';
 
-var plotAttrs = require('../../plots/attributes');
+var baseAttrs = require('../../plots/attributes');
 var hovertemplateAttrs = require('../../plots/template_attributes').hovertemplateAttrs;
 var extendFlat = require('../../lib/extend').extendFlat;
 var colormodel = require('./constants').colormodel;
@@ -108,7 +108,7 @@ module.exports = extendFlat({
         editType: 'plot',
         description: 'Same as `text`.'
     },
-    hoverinfo: extendFlat({}, plotAttrs.hoverinfo, {
+    hoverinfo: extendFlat({}, baseAttrs.hoverinfo, {
         flags: ['x', 'y', 'z', 'color', 'name', 'text'],
         dflt: 'x+y+z+text+name'
     }),
diff --git a/src/traces/parcats/attributes.js b/src/traces/parcats/attributes.js
index 8289c4a6642..ea71bcbdbe9 100644
--- a/src/traces/parcats/attributes.js
+++ b/src/traces/parcats/attributes.js
@@ -9,7 +9,7 @@
 'use strict';
 
 var extendFlat = require('../../lib/extend').extendFlat;
-var plotAttrs = require('../../plots/attributes');
+var baseAttrs = require('../../plots/attributes');
 var fontAttrs = require('../../plots/font_attributes');
 var colorScaleAttrs = require('../../components/colorscale/attributes');
 var hovertemplateAttrs = require('../../plots/template_attributes').hovertemplateAttrs;
@@ -47,7 +47,7 @@ var line = extendFlat(
 module.exports = {
     domain: domainAttrs({name: 'parcats', trace: true, editType: 'calc'}),
 
-    hoverinfo: extendFlat({}, plotAttrs.hoverinfo, {
+    hoverinfo: extendFlat({}, baseAttrs.hoverinfo, {
         flags: ['count', 'probability'],
         editType: 'plot',
         arrayOk: false
diff --git a/src/traces/pie/attributes.js b/src/traces/pie/attributes.js
index a1ec2203f6d..32bd7980258 100644
--- a/src/traces/pie/attributes.js
+++ b/src/traces/pie/attributes.js
@@ -8,7 +8,7 @@
 
 'use strict';
 
-var plotAttrs = require('../../plots/attributes');
+var baseAttrs = require('../../plots/attributes');
 var domainAttrs = require('../../plots/domain').attributes;
 var fontAttrs = require('../../plots/font_attributes');
 var colorAttrs = require('../../components/color/attributes');
@@ -158,7 +158,7 @@ module.exports = {
             'Determines which trace information appear on the graph.'
         ].join(' ')
     },
-    hoverinfo: extendFlat({}, plotAttrs.hoverinfo, {
+    hoverinfo: extendFlat({}, baseAttrs.hoverinfo, {
         flags: ['label', 'text', 'value', 'percent', 'name']
     }),
     hovertemplate: hovertemplateAttrs({}, {
diff --git a/src/traces/sankey/attributes.js b/src/traces/sankey/attributes.js
index a3501323cf9..4128118e1b7 100644
--- a/src/traces/sankey/attributes.js
+++ b/src/traces/sankey/attributes.js
@@ -9,7 +9,7 @@
 'use strict';
 
 var fontAttrs = require('../../plots/font_attributes');
-var plotAttrs = require('../../plots/attributes');
+var baseAttrs = require('../../plots/attributes');
 var colorAttrs = require('../../components/color/attributes');
 var fxAttrs = require('../../components/fx/attributes');
 var domainAttrs = require('../../plots/domain').attributes;
@@ -23,7 +23,7 @@ var overrideAll = require('../../plot_api/edit_types').overrideAll;
 var FORMAT_LINK = require('../../constants/docs').FORMAT_LINK;
 
 var attrs = module.exports = overrideAll({
-    hoverinfo: extendFlat({}, plotAttrs.hoverinfo, {
+    hoverinfo: extendFlat({}, baseAttrs.hoverinfo, {
         flags: [],
         arrayOk: false,
         description: [
diff --git a/src/traces/scattercarpet/attributes.js b/src/traces/scattercarpet/attributes.js
index 286d356fd3e..494b9693231 100644
--- a/src/traces/scattercarpet/attributes.js
+++ b/src/traces/scattercarpet/attributes.js
@@ -9,7 +9,7 @@
 'use strict';
 
 var scatterAttrs = require('../scatter/attributes');
-var plotAttrs = require('../../plots/attributes');
+var baseAttrs = require('../../plots/attributes');
 var hovertemplateAttrs = require('../../plots/template_attributes').hovertemplateAttrs;
 var texttemplateAttrs = require('../../plots/template_attributes').texttemplateAttrs;
 var colorScaleAttrs = require('../../components/colorscale/attributes');
@@ -118,7 +118,7 @@ module.exports = {
     selected: scatterAttrs.selected,
     unselected: scatterAttrs.unselected,
 
-    hoverinfo: extendFlat({}, plotAttrs.hoverinfo, {
+    hoverinfo: extendFlat({}, baseAttrs.hoverinfo, {
         flags: ['a', 'b', 'text', 'name']
     }),
     hoveron: scatterAttrs.hoveron,
diff --git a/src/traces/scattergeo/attributes.js b/src/traces/scattergeo/attributes.js
index c327921cd58..6c2cfa54a88 100644
--- a/src/traces/scattergeo/attributes.js
+++ b/src/traces/scattergeo/attributes.js
@@ -11,7 +11,7 @@
 var hovertemplateAttrs = require('../../plots/template_attributes').hovertemplateAttrs;
 var texttemplateAttrs = require('../../plots/template_attributes').texttemplateAttrs;
 var scatterAttrs = require('../scatter/attributes');
-var plotAttrs = require('../../plots/attributes');
+var baseAttrs = require('../../plots/attributes');
 var colorAttributes = require('../../components/colorscale/attributes');
 var dash = require('../../components/drawing/attributes').dash;
 
@@ -125,7 +125,7 @@ module.exports = overrideAll({
     selected: scatterAttrs.selected,
     unselected: scatterAttrs.unselected,
 
-    hoverinfo: extendFlat({}, plotAttrs.hoverinfo, {
+    hoverinfo: extendFlat({}, baseAttrs.hoverinfo, {
         flags: ['lon', 'lat', 'location', 'text', 'name']
     }),
     hovertemplate: hovertemplateAttrs(),
diff --git a/src/traces/scattergl/attributes.js b/src/traces/scattergl/attributes.js
index c56697489b2..d801de42f44 100644
--- a/src/traces/scattergl/attributes.js
+++ b/src/traces/scattergl/attributes.js
@@ -8,7 +8,7 @@
 
 'use strict';
 
-var plotAttrs = require('../../plots/attributes');
+var baseAttrs = require('../../plots/attributes');
 var scatterAttrs = require('../scatter/attributes');
 var colorScaleAttrs = require('../../components/colorscale/attributes');
 
@@ -92,7 +92,7 @@ var attrs = module.exports = overrideAll({
         textfont: scatterAttrs.unselected.textfont
     },
 
-    opacity: plotAttrs.opacity
+    opacity: baseAttrs.opacity
 
 }, 'calc', 'nested');
 
diff --git a/src/traces/scattermapbox/attributes.js b/src/traces/scattermapbox/attributes.js
index c9f96a02630..eeddb110c80 100644
--- a/src/traces/scattermapbox/attributes.js
+++ b/src/traces/scattermapbox/attributes.js
@@ -13,7 +13,7 @@ var texttemplateAttrs = require('../../plots/template_attributes').texttemplateA
 var scatterGeoAttrs = require('../scattergeo/attributes');
 var scatterAttrs = require('../scatter/attributes');
 var mapboxAttrs = require('../../plots/mapbox/layout_attributes');
-var plotAttrs = require('../../plots/attributes');
+var baseAttrs = require('../../plots/attributes');
 var colorScaleAttrs = require('../../components/colorscale/attributes');
 
 var extendFlat = require('../../lib/extend').extendFlat;
@@ -122,7 +122,7 @@ module.exports = overrideAll({
         marker: scatterAttrs.unselected.marker
     },
 
-    hoverinfo: extendFlat({}, plotAttrs.hoverinfo, {
+    hoverinfo: extendFlat({}, baseAttrs.hoverinfo, {
         flags: ['lon', 'lat', 'text', 'name']
     }),
     hovertemplate: hovertemplateAttrs(),
diff --git a/src/traces/scatterpolar/attributes.js b/src/traces/scatterpolar/attributes.js
index 1e5b2742dc6..40e1f52eef6 100644
--- a/src/traces/scatterpolar/attributes.js
+++ b/src/traces/scatterpolar/attributes.js
@@ -12,7 +12,7 @@ var hovertemplateAttrs = require('../../plots/template_attributes').hovertemplat
 var texttemplateAttrs = require('../../plots/template_attributes').texttemplateAttrs;
 var extendFlat = require('../../lib/extend').extendFlat;
 var scatterAttrs = require('../scatter/attributes');
-var plotAttrs = require('../../plots/attributes');
+var baseAttrs = require('../../plots/attributes');
 var lineAttrs = scatterAttrs.line;
 
 module.exports = {
@@ -131,7 +131,7 @@ module.exports = {
     // error_x (error_r, error_theta)
     // error_y
 
-    hoverinfo: extendFlat({}, plotAttrs.hoverinfo, {
+    hoverinfo: extendFlat({}, baseAttrs.hoverinfo, {
         flags: ['r', 'theta', 'text', 'name']
     }),
     hoveron: scatterAttrs.hoveron,
diff --git a/src/traces/scatterternary/attributes.js b/src/traces/scatterternary/attributes.js
index 990b9dbc9cf..eaddfa99786 100644
--- a/src/traces/scatterternary/attributes.js
+++ b/src/traces/scatterternary/attributes.js
@@ -11,7 +11,7 @@
 var hovertemplateAttrs = require('../../plots/template_attributes').hovertemplateAttrs;
 var texttemplateAttrs = require('../../plots/template_attributes').texttemplateAttrs;
 var scatterAttrs = require('../scatter/attributes');
-var plotAttrs = require('../../plots/attributes');
+var baseAttrs = require('../../plots/attributes');
 var colorScaleAttrs = require('../../components/colorscale/attributes');
 var dash = require('../../components/drawing/attributes').dash;
 
@@ -147,7 +147,7 @@ module.exports = {
     selected: scatterAttrs.selected,
     unselected: scatterAttrs.unselected,
 
-    hoverinfo: extendFlat({}, plotAttrs.hoverinfo, {
+    hoverinfo: extendFlat({}, baseAttrs.hoverinfo, {
         flags: ['a', 'b', 'c', 'text', 'name']
     }),
     hoveron: scatterAttrs.hoveron,
diff --git a/src/traces/sunburst/attributes.js b/src/traces/sunburst/attributes.js
index fd264a9e7d2..adb667df11b 100644
--- a/src/traces/sunburst/attributes.js
+++ b/src/traces/sunburst/attributes.js
@@ -8,7 +8,7 @@
 
 'use strict';
 
-var plotAttrs = require('../../plots/attributes');
+var baseAttrs = require('../../plots/attributes');
 var hovertemplateAttrs = require('../../plots/template_attributes').hovertemplateAttrs;
 var texttemplateAttrs = require('../../plots/template_attributes').texttemplateAttrs;
 
@@ -174,7 +174,7 @@ module.exports = {
     }),
 
     hovertext: pieAttrs.hovertext,
-    hoverinfo: extendFlat({}, plotAttrs.hoverinfo, {
+    hoverinfo: extendFlat({}, baseAttrs.hoverinfo, {
         flags: [
             'label',
             'text',
diff --git a/src/traces/waterfall/attributes.js b/src/traces/waterfall/attributes.js
index 94f0745cd02..1dd0323d792 100644
--- a/src/traces/waterfall/attributes.js
+++ b/src/traces/waterfall/attributes.js
@@ -10,7 +10,7 @@
 
 var barAttrs = require('../bar/attributes');
 var lineAttrs = require('../scatter/attributes').line;
-var plotAttrs = require('../../plots/attributes');
+var baseAttrs = require('../../plots/attributes');
 var hovertemplateAttrs = require('../../plots/template_attributes').hovertemplateAttrs;
 var texttemplateAttrs = require('../../plots/template_attributes').texttemplateAttrs;
 var constants = require('./constants');
@@ -82,7 +82,7 @@ module.exports = {
         keys: constants.eventDataKeys
     }),
 
-    hoverinfo: extendFlat({}, plotAttrs.hoverinfo, {
+    hoverinfo: extendFlat({}, baseAttrs.hoverinfo, {
         flags: ['name', 'x', 'y', 'text', 'initial', 'delta', 'final']
     }),
 
diff --git a/test/image/baselines/contour_legend-coloraxis.png b/test/image/baselines/contour_legend-coloraxis.png
new file mode 100644
index 00000000000..04e5e38d97d
Binary files /dev/null and b/test/image/baselines/contour_legend-coloraxis.png differ
diff --git a/test/image/baselines/contour_legend-colorscale.png b/test/image/baselines/contour_legend-colorscale.png
new file mode 100644
index 00000000000..1e658a24951
Binary files /dev/null and b/test/image/baselines/contour_legend-colorscale.png differ
diff --git a/test/image/baselines/histogram2d_legend-colorscale.png b/test/image/baselines/histogram2d_legend-colorscale.png
new file mode 100644
index 00000000000..3282b5d70ed
Binary files /dev/null and b/test/image/baselines/histogram2d_legend-colorscale.png differ
diff --git a/test/image/baselines/histogram2dcontour_legend-coloraxis.png b/test/image/baselines/histogram2dcontour_legend-coloraxis.png
new file mode 100644
index 00000000000..62fc4596ec4
Binary files /dev/null and b/test/image/baselines/histogram2dcontour_legend-coloraxis.png differ
diff --git a/test/image/mocks/contour_legend-coloraxis.json b/test/image/mocks/contour_legend-coloraxis.json
new file mode 100644
index 00000000000..29363a3bdbf
--- /dev/null
+++ b/test/image/mocks/contour_legend-coloraxis.json
@@ -0,0 +1,29 @@
+{
+    "data": [
+        {
+            "showlegend": true,
+            "coloraxis": "coloraxis",
+            "x": [0, 10, 12],
+            "y": [10, 12, 0],
+            "z": [1, 2, 3],
+            "contours": {"coloring": "heatmap"},
+            "line": {"color": "#fff"},
+            "type": "contour",
+            "name": "contour"
+        }
+    ],
+    "layout": {
+        "coloraxis": {
+            "colorscale": [[0, "blue"], [1, "red"]],
+            "reversescale": true,
+            "showscale": false
+        },
+        "title": "<i>contour</i> legend with <b>coloraxis</b>",
+        "margin": {
+            "t": 125,
+            "b": 25
+        },
+        "width": 600,
+        "height": 400
+    }
+}
diff --git a/test/image/mocks/contour_legend-colorscale.json b/test/image/mocks/contour_legend-colorscale.json
new file mode 100644
index 00000000000..51d9a39ee30
--- /dev/null
+++ b/test/image/mocks/contour_legend-colorscale.json
@@ -0,0 +1,123 @@
+{
+    "data": [
+        {
+            "showlegend": true,
+            "showscale": false,
+            "colorscale": [[0, "blue"], [1, "red"]],
+            "x": [0, 10, 12],
+            "y": [10, 12, 0],
+            "z": [1, 2, 3],
+            "contours": {"coloring": "heatmap"},
+            "line": {"color": "#fff"},
+            "type": "contour",
+            "name": "blue-red"
+        },
+        {
+            "xaxis": "x2",
+            "yaxis": "y2",
+            "showlegend": true,
+            "showscale": false,
+            "reversescale": true,
+            "colorscale": [[0, "blue"], [1, "red"]],
+            "x": [0, 10, 12],
+            "y": [10, 12, 0],
+            "z": [1, 2, 3],
+            "contours": {"coloring": "heatmap"},
+            "line": {"color": "#fff"},
+            "type": "contour",
+            "name": "reversed blue-red"
+        },
+        {
+            "xaxis": "x3",
+            "yaxis": "y3",
+            "showlegend": true,
+            "showscale": false,
+            "colorscale": [[0, "red"], [1, "blue"]],
+            "x": [0, 10, 12],
+            "y": [10, 12, 0],
+            "z": [1, 2, 3],
+            "contours": {"coloring": "heatmap"},
+            "line": {"color": "#fff"},
+            "type": "contour",
+            "name": "red-blue"
+        },
+        {
+            "xaxis": "x4",
+            "yaxis": "y4",
+            "showlegend": true,
+            "showscale": false,
+            "reversescale": true,
+            "colorscale": [[0, "red"], [1, "blue"]],
+            "x": [0, 10, 12],
+            "y": [10, 12, 0],
+            "z": [1, 2, 3],
+            "contours": {"coloring": "heatmap"},
+            "line": {"color": "#fff"},
+            "type": "contour",
+            "name": "reversed blue-red"
+        }
+    ],
+    "layout": {
+        "title": "<b>contour legends with heatmap coloring</b><br>red-blue should be equal to reversed blue-red.<br>i.e. display identical legends for identical graphs",
+        "margin": {
+            "t": 125,
+            "b": 25
+        },
+        "width": 800,
+        "height": 600,
+        "xaxis": {
+            "domain": [
+                0,
+                0.45
+            ]
+        },
+        "xaxis2": {
+            "anchor": "y2",
+            "domain": [
+                0.55,
+                1
+            ]
+        },
+        "xaxis3": {
+            "anchor": "y3",
+            "domain": [
+                0,
+                0.45
+            ]
+        },
+        "xaxis4": {
+            "anchor": "y4",
+            "domain": [
+                0.55,
+                1
+            ]
+        },
+        "yaxis": {
+            "domain": [
+                0,
+                0.45
+            ]
+        },
+        "yaxis2": {
+            "anchor": "x2",
+            "domain": [
+                0.55,
+                1
+            ]
+        },
+        "yaxis3": {
+            "anchor": "x3",
+            "domain": [
+                0.55,
+                1
+            ]
+        },
+        "yaxis4": {
+            "anchor": "x4",
+            "domain": [
+                0,
+                0.45
+            ]
+        }
+    }
+}
diff --git a/test/image/mocks/histogram2d_legend-colorscale.json b/test/image/mocks/histogram2d_legend-colorscale.json
new file mode 100644
index 00000000000..446bc6cf8a6
--- /dev/null
+++ b/test/image/mocks/histogram2d_legend-colorscale.json
@@ -0,0 +1,203 @@
+{
+    "data": [
+        {
+            "showlegend": true,
+            "showscale": false,
+            "colorscale": [[0, "blue"], [1, "red"]],
+            "x": [
+                "apples",
+                "apples",
+                "apples",
+                "apples",
+                "lemons",
+                "lemons"
+            ],
+            "y": [
+                "red",
+                "red",
+                "yellow",
+                "green",
+                "yellow",
+                "yellow"
+            ],
+            "z": [
+                "1",
+                "2",
+                "3",
+                "4",
+                "5",
+                "6"
+            ],
+            "histfunc": "sum",
+            "type": "histogram2dcontour",
+            "name": "blue-red"
+        },
+        {
+            "xaxis": "x2",
+            "yaxis": "y2",
+            "showlegend": true,
+            "showscale": false,
+            "reversescale": true,
+            "colorscale": [[0, "blue"], [1, "red"]],
+            "x": [
+                "apples",
+                "apples",
+                "apples",
+                "apples",
+                "lemons",
+                "lemons"
+            ],
+            "y": [
+                "red",
+                "red",
+                "yellow",
+                "green",
+                "yellow",
+                "yellow"
+            ],
+            "z": [
+                "1",
+                "2",
+                "3",
+                "4",
+                "5",
+                "6"
+            ],
+            "histfunc": "sum",
+            "type": "histogram2dcontour",
+            "name": "reversed blue-red"
+        },
+        {
+            "xaxis": "x3",
+            "yaxis": "y3",
+            "showlegend": true,
+            "showscale": false,
+            "colorscale": [[0, "red"], [1, "blue"]],
+            "x": [
+                "apples",
+                "apples",
+                "apples",
+                "apples",
+                "lemons",
+                "lemons"
+            ],
+            "y": [
+                "red",
+                "red",
+                "yellow",
+                "green",
+                "yellow",
+                "yellow"
+            ],
+            "z": [
+                "1",
+                "2",
+                "3",
+                "4",
+                "5",
+                "6"
+            ],
+            "histfunc": "sum",
+            "type": "histogram2dcontour",
+            "name": "red-blue"
+        },
+        {
+            "xaxis": "x4",
+            "yaxis": "y4",
+            "showlegend": true,
+            "showscale": false,
+            "reversescale": true,
+            "colorscale": [[0, "red"], [1, "blue"]],
+            "x": [
+                "apples",
+                "apples",
+                "apples",
+                "apples",
+                "lemons",
+                "lemons"
+            ],
+            "y": [
+                "red",
+                "red",
+                "yellow",
+                "green",
+                "yellow",
+                "yellow"
+            ],
+            "z": [
+                "1",
+                "2",
+                "3",
+                "4",
+                "5",
+                "6"
+            ],
+            "histfunc": "sum",
+            "type": "histogram2dcontour",
+            "name": "reversed blue-red"
+        }
+    ],
+    "layout": {
+        "title": "<b>histogram2dcontour legends</b><br>red-blue should be equal to reversed blue-red.<br>i.e. display identical legends for identical graphs",
+        "margin": {
+            "t": 125,
+            "b": 25
+        },
+        "width": 800,
+        "height": 600,
+        "xaxis": {
+            "domain": [
+                0,
+                0.45
+            ]
+        },
+        "xaxis2": {
+            "anchor": "y2",
+            "domain": [
+                0.55,
+                1
+            ]
+        },
+        "xaxis3": {
+            "anchor": "y3",
+            "domain": [
+                0,
+                0.45
+            ]
+        },
+        "xaxis4": {
+            "anchor": "y4",
+            "domain": [
+                0.55,
+                1
+            ]
+        },
+        "yaxis": {
+            "domain": [
+                0,
+                0.45
+            ]
+        },
+        "yaxis2": {
+            "anchor": "x2",
+            "domain": [
+                0.55,
+                1
+            ]
+        },
+        "yaxis3": {
+            "anchor": "x3",
+            "domain": [
+                0.55,
+                1
+            ]
+        },
+        "yaxis4": {
+            "anchor": "x4",
+            "domain": [
+                0,
+                0.45
+            ]
+        }
+    }
+}
diff --git a/test/image/mocks/histogram2dcontour_legend-coloraxis.json b/test/image/mocks/histogram2dcontour_legend-coloraxis.json
new file mode 100644
index 00000000000..8f9292489cd
--- /dev/null
+++ b/test/image/mocks/histogram2dcontour_legend-coloraxis.json
@@ -0,0 +1,49 @@
+{
+    "data": [
+        {
+           "showlegend": true,
+            "coloraxis": "coloraxis",
+            "x": [
+                "apples",
+                "apples",
+                "apples",
+                "apples",
+                "lemons",
+                "lemons"
+            ],
+            "y": [
+                "red",
+                "red",
+                "yellow",
+                "green",
+                "yellow",
+                "yellow"
+            ],
+            "z": [
+                "1",
+                "2",
+                "3",
+                "4",
+                "5",
+                "6"
+            ],
+            "histfunc": "sum",
+            "type": "histogram2dcontour",
+            "name": "histogram2dcontour"
+        }
+    ],
+    "layout": {
+        "coloraxis": {
+            "colorscale": [[0, "blue"], [1, "red"]],
+            "reversescale": true,
+            "showscale": false
+        },
+        "title": "<i>histogram2dcontour</i> legend with <b>coloraxis</b>",
+        "margin": {
+            "t": 125,
+            "b": 25
+        },
+        "width": 600,
+        "height": 400
+    }
+}