Merge pull request #1523 from plotly/hovertext-on-hover

Add 'hovertext' attribute in scatter* traces

Author: etpinard

src/traces/bar/arrays_to_calcdata.js

@@ -15,6 +15,7 @@ var mergeArray = require('../../lib').mergeArray;
 // arrayOk attributes, merge them into calcdata array
 module.exports = function arraysToCalcdata(cd, trace) {
     mergeArray(trace.text, cd, 'tx');
+    mergeArray(trace.hovertext, cd, 'htx');
 
     var marker = trace.marker;
     if(marker) {

src/traces/bar/attributes.js

@@ -49,6 +49,7 @@ module.exports = {
     dy: scatterAttrs.dy,
 
     text: scatterAttrs.text,
+    hovertext: scatterAttrs.hovertext,
 
     textposition: {
         valType: 'enumerated',

src/traces/bar/defaults.js

@@ -37,6 +37,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     coerce('width');
 
     coerce('text');
+    coerce('hovertext');
 
     var textPosition = coerce('textposition');
 

src/traces/bar/hover.js

@@ -99,7 +99,10 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
         pointData.xLabelVal = di.p;
     }
 
-    if(di.tx) pointData.text = di.tx;
+    if(di.htx) pointData.text = di.htx;
+    else if(trace.hovertext) pointData.text = trace.hovertext;
+    else if(di.tx) pointData.text = di.tx;
+    else if(trace.text) pointData.text = trace.text;
 
     ErrorBars.hoverInfo(di, trace, pointData);
 

src/traces/pie/attributes.js

@@ -79,7 +79,27 @@ module.exports = {
 
     text: {
         valType: 'data_array',
-        description: 'Sets text elements associated with each sector.'
+        description: [
+            'Sets text elements associated with each sector.',
+            'If trace `textinfo` contains a *text* flag, these elements will seen',
+            'on the chart.',
+            'If trace `hoverinfo` contains a *text* flag and *hovertext* is not set,',
+            'these elements will be seen in the hover labels.'
+        ].join(' ')
+    },
+    hovertext: {
+        valType: 'string',
+        role: 'info',
+        dflt: '',
+        arrayOk: true,
+        description: [
+            'Sets hover text elements associated with each sector.',
+            'If a single string, the same string appears for',
+            'all data points.',
+            'If an array of string, the items are mapped in order of',
+            'this trace\'s sectors.',
+            'To be seen, trace `hoverinfo` must contain a *text* flag.'
+        ].join(' ')
     },
 
 // 'see eg:'

src/traces/pie/defaults.js

@@ -45,6 +45,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
 
     var textData = coerce('text');
     var textInfo = coerce('textinfo', Array.isArray(textData) ? 'text+percent' : 'percent');
+    coerce('hovertext');
 
     coerce('hoverinfo', (layout._dataLength === 1) ? 'label+text+value+percent' : undefined);
 

src/traces/pie/plot.js

@@ -110,8 +110,16 @@ module.exports = function plot(gd, cdpie) {
                         thisText = [];
 
                     if(hoverinfo.indexOf('label') !== -1) thisText.push(pt.label);
-                    if(trace2.text && trace2.text[pt.i] && hoverinfo.indexOf('text') !== -1) {
-                        thisText.push(trace2.text[pt.i]);
+                    if(hoverinfo.indexOf('text') !== -1) {
+                        if(trace2.hovertext) {
+                            thisText.push(
+                                Array.isArray(trace2.hovertext) ?
+                                    trace2.hovertext[pt.i] :
+                                    trace2.hovertext
+                            );
+                        } else if(trace2.text && trace2.text[pt.i]) {
+                            thisText.push(trace2.text[pt.i]);
+                        }
                     }
                     if(hoverinfo.indexOf('value') !== -1) thisText.push(helpers.formatPieValue(pt.v, separators));
                     if(hoverinfo.indexOf('percent') !== -1) thisText.push(helpers.formatPiePercent(pt.v / cd0.vTotal, separators));

src/traces/scatter/arrays_to_calcdata.js

@@ -16,6 +16,7 @@ var Lib = require('../../lib');
 module.exports = function arraysToCalcdata(cd, trace) {
 
     Lib.mergeArray(trace.text, cd, 'tx');
+    Lib.mergeArray(trace.hovertext, cd, 'htx');
     Lib.mergeArray(trace.customdata, cd, 'data');
     Lib.mergeArray(trace.textposition, cd, 'tp');
     if(trace.textfont) {

src/traces/scatter/attributes.js

@@ -83,7 +83,23 @@ module.exports = {
             'If a single string, the same string appears over',
             'all the data points.',
             'If an array of string, the items are mapped in order to the',
-            'this trace\'s (x,y) coordinates.'
+            'this trace\'s (x,y) coordinates.',
+            'If trace `hoverinfo` contains a *text* flag and *hovertext* is not set,',
+            'these elements will be seen in the hover labels.'
+        ].join(' ')
+    },
+    hovertext: {
+        valType: 'string',
+        role: 'info',
+        dflt: '',
+        arrayOk: true,
+        description: [
+            'Sets hover text elements associated with each (x,y) pair.',
+            'If a single string, the same string appears over',
+            'all the data points.',
+            'If an array of string, the items are mapped in order to the',
+            'this trace\'s (x,y) coordinates.',
+            'To be seen, trace `hoverinfo` must contain a *text* flag.'
         ].join(' ')
     },
     mode: {

src/traces/scatter/defaults.js

@@ -38,6 +38,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
 
     coerce('customdata');
     coerce('text');
+    coerce('hovertext');
     coerce('mode', defaultMode);
     coerce('ids');