Removed chart config for showDroplines

Added axis layout option for showspikes
Added background behind droplines
Added axis indicator marker, including on free anchored axes
Always draw dropline to chart limit, including for shared axes - not drawing all the way to free anchored axes

Author: rpaskowitz

src/components/dragelement/unhover.js

@@ -42,6 +42,7 @@ unhover.raw = function unhoverRaw(gd, evt) {
 
     fullLayout._hoverlayer.selectAll('g').remove();
     fullLayout._hoverlayer.selectAll('line').remove();
+    fullLayout._hoverlayer.selectAll('circle').remove();
     gd._hoverdata = undefined;
 
     if(evt.target && oldhoverdata) {

src/plot_api/plot_config.js

@@ -48,9 +48,6 @@ module.exports = {
     // new users see some hints about interactivity
     showTips: true,
 
-    // display droplines on cartesian graphs
-    showDroplines: false,
-
     // enable axis pan/zoom drag handles
     showAxisDragHandles: true,
 

src/plots/cartesian/axis_defaults.js

@@ -99,6 +99,8 @@ module.exports = function handleAxisDefaults(containerIn, containerOut, coerce,
     coerce('range');
     containerOut.cleanRange();
 
+    coerce('showspikes');
+
     handleTickValueDefaults(containerIn, containerOut, coerce, axType);
     handleTickLabelDefaults(containerIn, containerOut, coerce, axType, options);
     handleTickMarkDefaults(containerIn, containerOut, coerce, options);

src/plots/cartesian/graph_interact.js

@@ -592,7 +592,7 @@ function hover(gd, evt, subplot) {
 
     gd._hoverdata = newhoverdata;
 
-    if(gd._context.showDroplines && hoverChanged(gd, evt, oldhoverdata)) {
+    if(hoverChanged(gd, evt, oldhoverdata)) {
         var droplineOpts = {
             hovermode: hovermode,
             container: fullLayout._hoverlayer,
@@ -829,38 +829,102 @@ fx.loneUnhover = function(containerOrSelection) {
 
     selection.selectAll('g.hovertext').remove();
     selection.selectAll('line.dropline').remove();
+    selection.selectAll('circle.dropline').remove();
 };
 
 function createDroplines(hoverData, opts) {
     var hovermode = opts.hovermode,
-        container = opts.container;
-
+        container = opts.container,
+        outerContainer = opts.outerContainer;
     if(hovermode !== 'closest') return;
-    var c0 = hoverData[0];
-    var x = (c0.x0 + c0.x1) / 2;
-    var y = (c0.y0 + c0.y1) / 2;
-    var xOffset = c0.xa._offset;
-    var yOffset = c0.ya._offset;
+    var c0 = hoverData[0],
+        x = (c0.x0 + c0.x1) / 2,
+        y = (c0.y0 + c0.y1) / 2,
+        xOffset = c0.xa._offset,
+        yOffset = c0.ya._offset,
+        xPoint = xOffset + x,
+        yPoint = yOffset + y,
+        xSide = c0.xa.side,
+        ySide = c0.ya.side,
+        xLength = c0.xa._length,
+        yLength = c0.ya._length,
+        xEdge = c0.ya._boundingBox.left + (ySide === 'left' ? c0.ya._boundingBox.width : 0),
+        yEdge = c0.xa._boundingBox.top + (xSide === 'top' ? c0.xa._boundingBox.height : 0),
+        outerBBox = outerContainer.node().getBoundingClientRect(),
+        xFreeBase = xOffset + (ySide === 'right' ? xLength : 0),
+        yFreeBase = yOffset + (xSide === 'top' ? yLength : 0),
+        xAnchoredBase = xEdge - outerBBox.left,
+        yAnchoredBase = yEdge - outerBBox.top,
+        xBase = c0.ya.anchor === 'free' ? xFreeBase : xAnchoredBase,
+        yBase = c0.xa.anchor === 'free' ? yFreeBase : yAnchoredBase,
+        color = c0.color;
+
+    // Remove old dropline items
     container.selectAll('line.dropline').remove();
-    container.append('line')
-        .attr('x1', xOffset + (c0.ya.side === 'right' ? c0.xa._length : 0))
-        .attr('x2', xOffset + x)
-        .attr('y1', yOffset + y)
-        .attr('y2', yOffset + y)
-        .attr('stroke-width', 3)
-        .attr('stroke', c0.color)
-        .attr('stroke-dasharray', '5,5')
-        .attr('class', 'dropline');
-
-    container.append('line')
-        .attr('x1', xOffset + x)
-        .attr('x2', xOffset + x)
-        .attr('y1', yOffset + y)
-        .attr('y2', yOffset + c0.ya._length)
-        .attr('stroke-width', 3)
-        .attr('stroke', c0.color)
-        .attr('stroke-dasharray', '5,5')
-        .attr('class', 'dropline');
+    container.selectAll('circle.dropline').remove();
+
+
+    if(c0.ya.showspikes) {
+        // Background horizontal Line (to y-axis)
+        container.append('line')
+            .attr('x1', xBase)
+            .attr('x2', xPoint)
+            .attr('y1', yPoint)
+            .attr('y2', yPoint)
+            .attr('stroke-width', 5)
+            .attr('stroke', '#fff')
+            .attr('class', 'dropline');
+
+        // Foreground horizontal line (to y-axis)
+        container.append('line')
+            .attr('x1', xBase)
+            .attr('x2', xPoint)
+            .attr('y1', yPoint)
+            .attr('y2', yPoint)
+            .attr('stroke-width', 3)
+            .attr('stroke', color)
+            .attr('stroke-dasharray', '5,5')
+            .attr('class', 'dropline');
+
+        // Y axis marker
+        container.append('circle')
+            .attr('cx', xBase)
+            .attr('cy', yPoint)
+            .attr('r', 3)
+            .attr('fill', color)
+            .attr('class', 'dropline');
+    }
+
+    if(c0.xa.showspikes) {
+        // Background vertical line (to x-axis)
+        container.append('line')
+            .attr('x1', xPoint)
+            .attr('x2', xPoint)
+            .attr('y1', yPoint)
+            .attr('y2', yBase)
+            .attr('stroke-width', 5)
+            .attr('stroke', '#fff')
+            .attr('class', 'dropline');
+
+        // Foreground vertical line (to x-axis)
+        container.append('line')
+            .attr('x1', xPoint)
+            .attr('x2', xPoint)
+            .attr('y1', yPoint)
+            .attr('y2', yBase)
+            .attr('stroke-width', 3)
+            .attr('stroke', color)
+            .attr('stroke-dasharray', '5,5')
+            .attr('class', 'dropline');
+
+        // X axis marker
+        container.append('circle')
+            .attr('cx', xPoint)
+            .attr('cy', yBase)
+            .attr('r', 3)
+            .attr('fill', color)
+            .attr('class', 'dropline');
+    }
 }
 
 function createHoverText(hoverData, opts) {

src/plots/cartesian/layout_attributes.js

@@ -244,6 +244,15 @@ module.exports = {
         role: 'style',
         description: 'Determines whether or not the tick labels are drawn.'
     },
+    showspikes: {
+        valType: 'boolean',
+        dflt: false,
+        role: 'style',
+        description: [
+            'Determines whether or not spikes (aka droplines) are drawn for this axis.',
+            'Note: This only takes affect when hovermode = closest'
+        ].join(' ')
+    },
     tickfont: extendFlat({}, fontAttrs, {
         description: 'Sets the tick font.'
     }),