Name back to showspikes

Keep spike background color to the chart background, unless the series color is too close, then use contrast color

Author: rpaskowitz

src/components/modebar/buttons.js

@@ -206,7 +206,7 @@ function handleCartesian(gd, ev) {
                         aobj[axName + '.range[1]'] = rangeInitial[1];
                     }
                     if(ax._showSpikeInitial !== undefined) {
-                        aobj[axName + '.showspike'] = ax._showSpikeInitial;
+                        aobj[axName + '.showspikes'] = ax._showSpikeInitial;
                         if(allEnabled === 'on' && !ax._showSpikeInitial) {
                             allEnabled = 'off';
                         }
@@ -241,7 +241,7 @@ function handleCartesian(gd, ev) {
         } else if(astr === 'hovermode' && val === 'closest') {
             for(i = 0; i < axList.length; i++) {
                 ax = axList[i];
-                if(allEnabled === 'on' && !ax.showspike) {
+                if(allEnabled === 'on' && !ax.showspikes) {
                     allEnabled = 'off';
                 }
             }
@@ -569,7 +569,7 @@ function setSpikelineVisibility(gd) {
     for(var i = 0; i < axList.length; i++) {
         ax = axList[i];
         axName = ax._name;
-        aobj[axName + '.showspike'] = fullLayout._cartesianSpikesEnabled === 'on' ? true : false;
+        aobj[axName + '.showspikes'] = fullLayout._cartesianSpikesEnabled === 'on' ? true : false;
     }
 
     return aobj;

src/plots/cartesian/axes.js

@@ -373,16 +373,16 @@ axes.saveShowSpikeInitial = function(gd, overwrite) {
         var isNew = (ax._showSpikeInitial === undefined);
         var hasChanged = (
             isNew || !(
-                ax.showspike === ax._showspike
+                ax.showspikes === ax._showspikes
             )
         );
 
         if((isNew) || (overwrite && hasChanged)) {
-            ax._showSpikeInitial = ax.showspike;
+            ax._showSpikeInitial = ax.showspikes;
             hasOneAxisChanged = true;
         }
 
-        if(allEnabled === 'on' && !ax.showspike) {
+        if(allEnabled === 'on' && !ax.showspikes) {
             allEnabled = 'off';
         }
     }

src/plots/cartesian/axis_defaults.js

@@ -75,7 +75,7 @@ module.exports = function handleAxisDefaults(containerIn, containerOut, coerce,
     coerce('range');
     containerOut.cleanRange();
 
-    coerce('showspike');
+    coerce('showspikes');
     coerce('spikecolor');
     coerce('spikethickness');
     coerce('spikedash');

src/plots/cartesian/graph_interact.js

@@ -860,12 +860,15 @@ function createDroplines(hoverData, opts) {
         yAnchoredBase = yEdge - outerBBox.top,
         xBase = c0.ya.anchor === 'free' ? xFreeBase : xAnchoredBase,
         yBase = c0.xa.anchor === 'free' ? yFreeBase : yAnchoredBase,
-        xColor = c0.xa.spikecolor ? c0.xa.spikecolor : c0.color,
-        yColor = c0.ya.spikecolor ? c0.ya.spikecolor : c0.color,
-        xContrastColor = tinycolor(xColor).getBrightness() > 128 ?
-                '#000' : Color.background,
-        yContrastColor = tinycolor(yColor).getBrightness() > 128 ?
-                '#000' : Color.background,
+        contrastColor = Color.combine(fullLayout.plot_bgcolor, fullLayout.paper_bgcolor),
+        xColor = c0.xa.spikecolor ? c0.xa.spikecolor : (
+            tinycolor.readability(c0.color,contrastColor) < 1.5 ? (
+                tinycolor(c0.color).getBrightness() > 128 ? '#000' : Color.background)
+                : c0.color),
+        yColor = c0.ya.spikecolor ? c0.ya.spikecolor : (
+            tinycolor.readability(c0.color,contrastColor) < 1.5 ? (
+                tinycolor(c0.color).getBrightness() > 128 ? '#000' : Color.background)
+                : c0.color),
         xThickness = c0.xa.spikethickness,
         yThickness = c0.ya.spikethickness,
         xDash = Drawing.dashStyle(c0.xa.spikedash, xThickness),
@@ -882,7 +885,7 @@ function createDroplines(hoverData, opts) {
     container.selectAll('circle.dropline').remove();
 
 
-    if(c0.ya.showspike) {
+    if(c0.ya.showspikes) {
         if(ySpikeLine) {
             // Background horizontal Line (to y-axis)
             container.append('line')
@@ -892,7 +895,7 @@ function createDroplines(hoverData, opts) {
                     'y1': yPoint,
                     'y2': yPoint,
                     'stroke-width': yThickness + 2,
-                    'stroke': yContrastColor
+                    'stroke': contrastColor
                 })
                 .classed('dropline', true)
                 .classed('crisp', true);
@@ -925,17 +928,17 @@ function createDroplines(hoverData, opts) {
         }
     }
 
-    if(c0.xa.showspike) {
+    if(c0.xa.showspikes) {
         if(xSpikeLine) {
         // Background vertical line (to x-axis)
             container.append('line')
                 .attr({
                     'x1': xPoint,
                     'x2': xPoint,
-                    'y1': yEndSpike,
-                    'y2': yBase,
+                    'y1': yBase,
+                    'y2': yEndSpike,
                     'stroke-width': xThickness + 2,
-                    'stroke': xContrastColor
+                    'stroke': contrastColor
                 })
                 .classed('dropline', true)
                 .classed('crisp', true);
@@ -945,8 +948,8 @@ function createDroplines(hoverData, opts) {
                 .attr({
                     'x1': xPoint,
                     'x2': xPoint,
-                    'y1': yEndSpike,
-                    'y2': yBase,
+                    'y1': yBase,
+                    'y2': yEndSpike,
                     'stroke-width': xThickness,
                     'stroke': xColor,
                     'stroke-dasharray': xDash

src/plots/cartesian/layout_attributes.js

@@ -279,7 +279,7 @@ module.exports = {
         role: 'style',
         description: 'Determines whether or not the tick labels are drawn.'
     },
-    showspike: {
+    showspikes: {
         valType: 'boolean',
         dflt: false,
         role: 'style',