Implement hovertemplate for candlestick and ohlc traces

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 = false;
+
     const { hovertemplate = false } = d;
     if (hovertemplate) {
         const labels = d.hovertemplateLabels || d;

src/traces/candlestick/attributes.js

@@ -2,13 +2,15 @@
 
 var extendFlat = require('../../lib').extendFlat;
 var axisHoverFormat = require('../../plots/cartesian/axis_format_attributes').axisHoverFormat;
+var hovertemplateAttrs = require('../../plots/template_attributes').hovertemplateAttrs;
+var templatefallbackAttrs = require('../../plots/template_attributes').templatefallbackAttrs;
 var OHLCattrs = require('../ohlc/attributes');
 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 +51,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

@@ -2,7 +2,10 @@
 
 var extendFlat = require('../../lib').extendFlat;
 var scatterAttrs = require('../scatter/attributes');
+var baseAttrs = require('../../plots/attributes');
 var axisHoverFormat = require('../../plots/cartesian/axis_format_attributes').axisHoverFormat;
+var hovertemplateAttrs = require('../../plots/template_attributes').hovertemplateAttrs;
+var templatefallbackAttrs = require('../../plots/template_attributes').templatefallbackAttrs;
 var dash = require('../../components/drawing/attributes').dash;
 var fxAttrs = require('../../components/fx/attributes');
 var delta = require('../../constants/delta.js');
@@ -15,7 +18,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 +28,6 @@ function directionAttrs(lineColorDefault) {
 }
 
 module.exports = {
-
     xperiod: scatterAttrs.xperiod,
     xperiod0: scatterAttrs.xperiod0,
     xperiodalignment: scatterAttrs.xperiodalignment,
@@ -35,10 +37,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.'].join(' ')
     },
 
     open: {
@@ -99,7 +98,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,28 +108,28 @@ 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.'].join(' ')
     },
 
     hoverlabel: extendFlat({}, fxAttrs.hoverlabel, {
         split: {
             valType: 'boolean',
             dflt: false,
             editType: 'style',
-            description: [
-                'Show hover information (open, close, high, low) in',
-                'separate labels.'
-            ].join(' ')
+            description: ['Show hover information (open, close, high, low) in', 'separate labels.'].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

@@ -165,7 +165,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;