Merge pull request #7619 from plotly/add-hovertemplate-for-candlestick

Implement `hovertemplate` for `candlestick` and `ohlc` traces

Author: emilykl

draftlogs/7619_add.md

@@ -0,0 +1 @@
+- Add `hovertemplate` for `candlestick` and `ohlc` traces [[#7619](https://github.com/plotly/plotly.js/pull/7619)]

src/components/fx/hover.js

@@ -1662,7 +1662,11 @@ function getHoverLabelText(d, showCommonLabel, hovermode, fullLayout, t0, g) {
         text = name;
     }
 
-    // hovertemplate
+    // Ignore hovertemplate if hoverlabel.split is set
+    // This ensures correct behavior of hoverlabel.split for candlestick and OHLC traces
+    // Not very elegant but it works
+    if (d.trace?.hoverlabel?.split) d.hovertemplate = '';
+
     const { hovertemplate = false } = d;
     if (hovertemplate) {
         const labels = d.hovertemplateLabels || d;

src/traces/candlestick/attributes.js

@@ -8,7 +8,7 @@ var boxAttrs = require('../box/attributes');
 function directionAttrs(lineColorDefault) {
     return {
         line: {
-            color: extendFlat({}, boxAttrs.line.color, {dflt: lineColorDefault}),
+            color: extendFlat({}, boxAttrs.line.color, { dflt: lineColorDefault }),
             width: boxAttrs.line.width,
             editType: 'style'
         },
@@ -49,6 +49,8 @@ module.exports = {
 
     text: OHLCattrs.text,
     hovertext: OHLCattrs.hovertext,
+    hovertemplate: OHLCattrs.hovertemplate,
+    hovertemplatefallback: OHLCattrs.hovertemplatefallback,
 
     whiskerwidth: extendFlat({}, boxAttrs.whiskerwidth, { dflt: 0 }),
 

src/traces/candlestick/defaults.js

@@ -12,12 +12,12 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     }
 
     var len = handleOHLC(traceIn, traceOut, coerce, layout);
-    if(!len) {
+    if (!len) {
         traceOut.visible = false;
         return;
     }
 
-    handlePeriodDefaults(traceIn, traceOut, layout, coerce, {x: true});
+    handlePeriodDefaults(traceIn, traceOut, layout, coerce, { x: true });
     coerce('xhoverformat');
     coerce('yhoverformat');
 
@@ -28,6 +28,9 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
 
     coerce('text');
     coerce('hovertext');
+    coerce('hovertemplate');
+    coerce('hovertemplatefallback');
+
     coerce('whiskerwidth');
 
     layout._requestRangeslider[traceOut.xaxis] = true;

src/traces/ohlc/attributes.js

@@ -3,6 +3,7 @@
 var extendFlat = require('../../lib').extendFlat;
 var scatterAttrs = require('../scatter/attributes');
 var axisHoverFormat = require('../../plots/cartesian/axis_format_attributes').axisHoverFormat;
+const { hovertemplateAttrs, templatefallbackAttrs } = require('../../plots/template_attributes');
 var dash = require('../../components/drawing/attributes').dash;
 var fxAttrs = require('../../components/fx/attributes');
 var delta = require('../../constants/delta.js');
@@ -15,7 +16,7 @@ var lineAttrs = scatterAttrs.line;
 function directionAttrs(lineColorDefault) {
     return {
         line: {
-            color: extendFlat({}, lineAttrs.color, {dflt: lineColorDefault}),
+            color: extendFlat({}, lineAttrs.color, { dflt: lineColorDefault }),
             width: lineAttrs.width,
             dash: dash,
             editType: 'style'
@@ -25,7 +26,6 @@ function directionAttrs(lineColorDefault) {
 }
 
 module.exports = {
-
     xperiod: scatterAttrs.xperiod,
     xperiod0: scatterAttrs.xperiod0,
     xperiodalignment: scatterAttrs.xperiodalignment,
@@ -35,10 +35,7 @@ module.exports = {
     x: {
         valType: 'data_array',
         editType: 'calc+clearAxisTypes',
-        description: [
-            'Sets the x coordinates.',
-            'If absent, linear coordinate will be generated.'
-        ].join(' ')
+        description: 'Sets the x coordinates. If absent, linear coordinate will be generated.'
     },
 
     open: {
@@ -99,7 +96,7 @@ 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',
-            'this trace\'s sample points.'
+            "this trace's sample points."
         ].join(' ')
     },
     hovertext: {
@@ -109,17 +106,20 @@ module.exports = {
         editType: 'calc',
         description: 'Same as `text`.'
     },
-
+    hovertemplate: hovertemplateAttrs(
+        {},
+        {
+            keys: ['open', 'high', 'low', 'close']
+        }
+    ),
+    hovertemplatefallback: templatefallbackAttrs(),
     tickwidth: {
         valType: 'number',
         min: 0,
         max: 0.5,
         dflt: 0.3,
         editType: 'calc',
-        description: [
-            'Sets the width of the open/close tick marks',
-            'relative to the *x* minimal interval.'
-        ].join(' ')
+        description: 'Sets the width of the open/close tick marks relative to the *x* minimal interval.'
     },
 
     hoverlabel: extendFlat({}, fxAttrs.hoverlabel, {
@@ -128,8 +128,8 @@ module.exports = {
             dflt: false,
             editType: 'style',
             description: [
-                'Show hover information (open, close, high, low) in',
-                'separate labels.'
+                'Show hover information (open, close, high, low) in separate labels, rather than a single unified label.',
+                'Default: *false*. When set to *true*, `hovertemplate` is ignored.'
             ].join(' ')
         }
     }),

src/traces/ohlc/defaults.js

@@ -11,12 +11,12 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     }
 
     var len = handleOHLC(traceIn, traceOut, coerce, layout);
-    if(!len) {
+    if (!len) {
         traceOut.visible = false;
         return;
     }
 
-    handlePeriodDefaults(traceIn, traceOut, layout, coerce, {x: true});
+    handlePeriodDefaults(traceIn, traceOut, layout, coerce, { x: true });
     coerce('xhoverformat');
     coerce('yhoverformat');
 
@@ -28,6 +28,9 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
 
     coerce('text');
     coerce('hovertext');
+    coerce('hovertemplate');
+    coerce('hovertemplatefallback');
+
     coerce('tickwidth');
 
     layout._requestRangeslider[traceOut.xaxis] = true;

src/traces/ohlc/hover.js

@@ -99,16 +99,11 @@ function hoverSplit(pointData, xval, yval, hovermode) {
     // skip the rest (for this trace) if we didn't find a close point
     if(!closestPoint) return [];
 
-    var cdIndex = closestPoint.index;
-    var di = cd[cdIndex];
-    var hoverinfo = di.hi || trace.hoverinfo;
-    var hoverParts = hoverinfo.split('+');
-    var isAll = hoverinfo === 'all';
-    var hasY = isAll || hoverParts.indexOf('y') !== -1;
+    var di = cd[closestPoint.index];
+    var hoverinfo = di.hi || trace.hoverinfo || '';
 
-    // similar to hoverOnPoints, we return nothing
-    // if all or y is not present.
-    if(!hasY) return [];
+    // If hoverinfo is 'none' or 'skip', we don't show any hover labels
+    if (hoverinfo === 'none' || hoverinfo === 'skip') return [];
 
     var attrs = ['high', 'open', 'close', 'low'];
 
@@ -165,7 +160,7 @@ function hoverOnPoints(pointData, xval, yval, hovermode) {
         return t.labels[attr] + Axes.hoverLabelText(ya, trace[attr][i], trace.yhoverformat);
     }
 
-    var hoverinfo = di.hi || trace.hoverinfo;
+    var hoverinfo = di.hi || trace.hoverinfo || '';
     var hoverParts = hoverinfo.split('+');
     var isAll = hoverinfo === 'all';
     var hasY = isAll || hoverParts.indexOf('y') !== -1;