feat: Make hover label triangle optional

draftlogs/7451_add.md

@@ -0,0 +1 @@
+- Add `layout.hoverlabel.showarrow` (and `trace.hoverlabel.showarrow`) attribute to allow hiding the triangular caret that appears on the hover label box [[#7451](https://github.com/plotly/plotly.js/pull/7451)]

src/components/fx/attributes.js

@@ -21,6 +21,7 @@ module.exports = {
         }),
         align: extendFlat({}, hoverLabelAttrs.align, {arrayOk: true}),
         namelength: extendFlat({}, hoverLabelAttrs.namelength, {arrayOk: true}),
+        showarrow: extendFlat({}, hoverLabelAttrs.showarrow),
         editType: 'none'
     }
 };

src/components/fx/calc.js

@@ -40,6 +40,7 @@ module.exports = function calc(gd) {
         fillFn(trace.hoverlabel.font.variant, cd, 'htv');
         fillFn(trace.hoverlabel.namelength, cd, 'hnl');
         fillFn(trace.hoverlabel.align, cd, 'hta');
+        fillFn(trace.hoverlabel.showarrow, cd, 'htsa');
     }
 };
 

src/components/fx/hover.js

@@ -1922,20 +1922,30 @@ function alignHoverText(hoverLabels, rotateLabels, scaleX, scaleY) {
         var offsetY = offsets.y;
 
         var isMiddle = anchor === 'middle';
+        // Get 'showarrow' attribute value from trace hoverlabel settings;
+        // if trace has no hoverlabel settings, we should show the arrow by default
+        var showArrow = 'hoverlabel' in d.trace ? d.trace.hoverlabel.showarrow : true;
 
-        g.select('path')
-            .attr('d', isMiddle ?
+        var pathStr;
+        if(isMiddle) {
             // middle aligned: rect centered on data
-            ('M-' + pX(d.bx / 2 + d.tx2width / 2) + ',' + pY(offsetY - d.by / 2) +
-              'h' + pX(d.bx) + 'v' + pY(d.by) + 'h-' + pX(d.bx) + 'Z') :
+            pathStr = 'M-' + pX(d.bx / 2 + d.tx2width / 2) + ',' + pY(offsetY - d.by / 2) +
+                      'h' + pX(d.bx) + 'v' + pY(d.by) + 'h-' + pX(d.bx) + 'Z';
+        } else if(showArrow) {
             // left or right aligned: side rect with arrow to data
-            ('M0,0L' + pX(horzSign * HOVERARROWSIZE + offsetX) + ',' + pY(HOVERARROWSIZE + offsetY) +
-                'v' + pY(d.by / 2 - HOVERARROWSIZE) +
-                'h' + pX(horzSign * d.bx) +
-                'v-' + pY(d.by) +
-                'H' + pX(horzSign * HOVERARROWSIZE + offsetX) +
-                'V' + pY(offsetY - HOVERARROWSIZE) +
-                'Z'));
+            pathStr = 'M0,0L' + pX(horzSign * HOVERARROWSIZE + offsetX) + ',' + pY(HOVERARROWSIZE + offsetY) +
+                      'v' + pY(d.by / 2 - HOVERARROWSIZE) +
+                      'h' + pX(horzSign * d.bx) +
+                      'v-' + pY(d.by) +
+                      'H' + pX(horzSign * HOVERARROWSIZE + offsetX) +
+                      'V' + pY(offsetY - HOVERARROWSIZE) +
+                      'Z';
+        } else {
+            // left or right aligned: side rect without arrow
+            pathStr = 'M' + pX(horzSign * HOVERARROWSIZE + offsetX) + ',' + pY(offsetY - d.by / 2) +
+                      'h' + pX(horzSign * d.bx) + 'v' + pY(d.by) + 'h' + pX(-horzSign * d.bx) + 'Z';
+        }
+        g.select('path').attr('d', pathStr);
 
         var posX = offsetX + shiftX.textShiftX;
         var posY = offsetY + d.ty0 - d.by / 2 + HOVERTEXTPAD;

src/components/fx/hoverlabel_defaults.js

@@ -36,6 +36,7 @@ module.exports = function handleHoverLabelDefaults(contIn, contOut, coerce, opts
     coerce('hoverlabel.bgcolor', opts.bgcolor);
     coerce('hoverlabel.bordercolor', opts.bordercolor);
     coerce('hoverlabel.namelength', opts.namelength);
+    coerce('hoverlabel.showarrow', opts.showarrow);
     Lib.coerceFont(coerce, 'hoverlabel.font', opts.font);
     coerce('hoverlabel.align', opts.align);
 };

src/components/fx/layout_attributes.js

@@ -165,6 +165,15 @@ module.exports = {
                 '`namelength - 3` characters and add an ellipsis.'
             ].join(' ')
         },
+        showarrow: {
+            valType: 'boolean',
+            dflt: true,
+            editType: 'none',
+            description: [
+                'Sets whether or not to show the hover label arrow/triangle',
+                'pointing to the data point.'
+            ].join(' ')
+        },
 
         editType: 'none'
     },

test/jasmine/tests/fx_test.js

@@ -179,7 +179,8 @@ describe('Fx defaults', function() {
                 shadow: 'auto',
             },
             align: 'auto',
-            namelength: 15
+            namelength: 15,
+            showarrow: true,
         });
 
         expect(out.data[1].hoverlabel).toEqual({
@@ -197,7 +198,8 @@ describe('Fx defaults', function() {
                 shadow: 'auto',
             },
             align: 'auto',
-            namelength: 15
+            namelength: 15,
+            showarrow: true,
         });
 
         expect(out.layout.annotations[0].hoverlabel).toEqual({

test/jasmine/tests/hover_label_test.js

@@ -7038,3 +7038,100 @@ describe('hover on traces with (x|y)hoverformat', function() {
         .then(done, done.fail);
     });
 });
+
+describe('hoverlabel.showarrow', function() {
+    'use strict';
+
+    var gd;
+
+    beforeEach(function() {
+        gd = createGraphDiv();
+    });
+
+    afterEach(destroyGraphDiv);
+
+    function _hover(x, y) {
+        mouseEvent('mousemove', x, y);
+        Lib.clearThrottle();
+    }
+
+    function getHoverPath() {
+        var hoverLabels = d3SelectAll('g.hovertext');
+        if (hoverLabels.size() === 0) return null;
+        return hoverLabels.select('path').attr('d');
+    }
+
+    it('should show hover arrow by default', function(done) {
+        Plotly.newPlot(gd, [{
+            x: [1, 2, 3],
+            y: [1, 2, 1],
+            type: 'scatter',
+            mode: 'markers'
+        }], {
+            width: 400,
+            height: 400,
+            margin: {l: 50, t: 50, r: 50, b: 50}
+        })
+        .then(function() {
+            _hover(200, 70); // Hover over middle point
+        })
+        .then(delay(HOVERMINTIME * 1.1))
+        .then(function() {
+            var pathD = getHoverPath();
+            expect(pathD).not.toBeNull('hover path should exist');
+            // Arrow paths contain 'L' commands starting from 0,0
+            expect(pathD).toMatch(/^M0,0L/, 'path should contain arrow (L command from 0,0)');
+        })
+        .then(done, done.fail);
+    });
+
+    it('should hide hover arrow when showarrow is false', function(done) {
+        Plotly.newPlot(gd, [{
+            x: [1, 2, 3],
+            y: [1, 2, 1],
+            type: 'scatter',
+            mode: 'markers'
+        }], {
+            width: 400,
+            height: 400,
+            margin: {l: 50, t: 50, r: 50, b: 50},
+            hoverlabel: { showarrow: false }
+        })
+        .then(function() {
+            _hover(200, 70); // Hover over middle point
+        })
+        .then(delay(HOVERMINTIME * 1.1))
+        .then(function() {
+            var pathD = getHoverPath();
+            expect(pathD).not.toBeNull('hover path should exist');
+            // No-arrow paths should be simple rectangles (no 'L' commands starting at 0,0))
+            expect(pathD).not.toMatch(/^M0,0L/, 'path should not start at 0,0');
+            expect(pathD).toMatch(/^M[\d.-]+,[\d.-]+h/, 'path should start with some numeric point and move horizontally');
+        })
+        .then(done, done.fail);
+    });
+
+    it('should work at trace level', function(done) {
+        Plotly.newPlot(gd, [{
+            x: [1, 2, 3],
+            y: [1, 2, 1],
+            type: 'scatter',
+            mode: 'markers',
+            hoverlabel: { showarrow: false }
+        }], {
+            width: 400,
+            height: 400,
+            margin: {l: 50, t: 50, r: 50, b: 50}
+        })
+        .then(function() {
+            _hover(200, 70); // Hover over middle point
+        })
+        .then(delay(HOVERMINTIME * 1.1))
+        .then(function() {
+            var pathD = getHoverPath();
+            expect(pathD).not.toBeNull('hover path should exist');
+            expect(pathD).not.toMatch(/^M0,0L/, 'trace-level showarrow:false should hide arrow');
+        })
+        .then(done, done.fail);
+    });
+});