Plotly.js: Tooltip text not working when text is 0 (number)

[stillesjo]

Example that displays the error

I want to be able to get a value from the text property in the data object. I noticed that if the value is the number 0 it won't be displayed in the plot.

          text: [0, 0, 0, 0, 0],
          hoverinfo: "x+text+name",

The code above will make the tooltip only show x and name. The text property won't be visible.

All other values except 0 will render properly, as can be seen in the code example linked above. Also if all the numbers are strings they will be shown correctly.

I guess that there is a null-check somewhere that treats 0 as false and therefore won't add it to the tooltip.

[dalle]

I think this will fix it:

diff --git a/src/components/drawing/index.js b/src/components/drawing/index.js
index 0e2dd1b10..ae9c8120e 100644
--- a/src/components/drawing/index.js
+++ b/src/components/drawing/index.js
@@ -650,7 +650,7 @@ drawing.textPointStyle = function(s, trace, gd) {
         var p = d3.select(this);
         var text = Lib.extractOption(d, trace, 'tx', 'text');

-        if(!text) {
+        if(!text && text !== 0) {
             p.remove();
             return;
         }

[alexcjohnson]

Thanks @stillesjo ! Interestingly we have a comment implying that we had addressed exactly this issue, so we'll have to look at it.
https://github.com/plotly/plotly.js/blob/dfb56d3a7b99ecf979365ed9b9c2c40747cdd915/src/traces/scatter/fill_hover_text.js#L38-L41
@dalle thanks, that would fix a related bug - display of the text alongside the markers. Add this to each of the traces in @stillesjo's example:

mode: 'lines+markers+text',
textposition: 'top right'

and you'll see the zeros get left out there too:

[dalle]

Okay, one more try:

diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js
index 0da92d4a8..ff8175c69 100644
--- a/src/components/fx/hover.js
+++ b/src/components/fx/hover.js
@@ -842,7 +842,7 @@ function createHoverText(hoverData, opts, gd) {
         else if(d.yLabel === undefined) text = d.xLabel;
         else text = '(' + d.xLabel + ', ' + d.yLabel + ')';

-        if(d.text && !Array.isArray(d.text)) {
+        if((d.text || d.text === 0) && !Array.isArray(d.text)) {
             text += (text ? '<br>' : '') + d.text;
         }

[alexcjohnson]

@dalle Looks likely that's the culprit - any chance you'd like to make a PR combining those two diffs with a test covering both parts? Perhaps based on:
https://github.com/plotly/plotly.js/blob/887cae6c0e879ac910e15040d7d3aabeccbec478/test/jasmine/tests/hover_label_test.js#L105

[dalle]

@alexcjohnson Creating a new hover label test seems easy, but I could not understand how to test for the marker.

[alexcjohnson]

Creating a new hover label test seems easy

Ah great, that's the harder test!

but I could not understand how to test for the marker.

Once you've made a plot that has text on the markers (which is done in the beforeEach block in the linked test) you should just be able to do something like:

d3.select(gd).selectAll('.textpoint text').size()

to check that the correct number of text markers are created - in the codesandbox example above, the .textpoint groups are empty in the bug case.

[dalle]

@alexcjohnson Did I create the PR correctly?