diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js
index c414b95454..9a2efdc3b6 100644
--- a/src/components/fx/hover.js
+++ b/src/components/fx/hover.js
@@ -213,9 +213,10 @@ exports.multiHovers = function multiHovers(hoverItems, opts) {
// Fix vertical overlap
var tooltipSpacing = 5;
var lastBottomY = 0;
+ var anchor = 0;
hoverLabel
.sort(function(a, b) {return a.y0 - b.y0;})
- .each(function(d) {
+ .each(function(d, i) {
var topY = d.y0 - d.by / 2;
if((topY - tooltipSpacing) < lastBottomY) {
@@ -225,8 +226,12 @@ exports.multiHovers = function multiHovers(hoverItems, opts) {
}
lastBottomY = topY + d.by + d.offset;
- });
+ if(i === opts.anchorIndex || 0) anchor = d.offset;
+ })
+ .each(function(d) {
+ d.offset -= anchor;
+ });
alignHoverText(hoverLabel, fullOpts.rotateLabels);
diff --git a/src/traces/sankey/plot.js b/src/traces/sankey/plot.js
index 8a4d518fec..8f3815b79e 100644
--- a/src/traces/sankey/plot.js
+++ b/src/traces/sankey/plot.js
@@ -159,14 +159,8 @@ module.exports = function plot(gd, calcData) {
var hoverItems = [];
- // For each related links, create a hoverItem
- for(var i = 0; i < d.flow.links.length; i++) {
- var link = d.flow.links[i];
- if(gd._fullLayout.hovermode === 'closest' && d.link.pointNumber !== link.pointNumber) continue;
- link.fullData = link.trace;
- obj = d.link.trace.link;
- var hoverCenterX;
- var hoverCenterY;
+ function hoverCenterPosition(link) {
+ var hoverCenterX, hoverCenterY;
if(link.circular) {
hoverCenterX = (link.circularPathData.leftInnerExtent + link.circularPathData.rightInnerExtent) / 2 + d.parent.translateX;
hoverCenterY = link.circularPathData.verticalFullExtent + d.parent.translateY;
@@ -174,12 +168,23 @@ module.exports = function plot(gd, calcData) {
hoverCenterX = (link.source.x1 + link.target.x0) / 2 + d.parent.translateX;
hoverCenterY = (link.y0 + link.y1) / 2 + d.parent.translateY;
}
+ return [hoverCenterX, hoverCenterY];
+ }
+ // For each related links, create a hoverItem
+ var anchorIndex = 0;
+ for(var i = 0; i < d.flow.links.length; i++) {
+ var link = d.flow.links[i];
+ if(gd._fullLayout.hovermode === 'closest' && d.link.pointNumber !== link.pointNumber) continue;
+ if(d.link.pointNumber === link.pointNumber) anchorIndex = i;
+ link.fullData = link.trace;
+ obj = d.link.trace.link;
+ var hoverCenter = hoverCenterPosition(link);
var hovertemplateLabels = {valueLabel: d3.format(d.valueFormat)(link.value) + d.valueSuffix};
hoverItems.push({
- x: hoverCenterX,
- y: hoverCenterY,
+ x: hoverCenter[0],
+ y: hoverCenter[1],
name: hovertemplateLabels.valueLabel,
text: [
link.label || '',
@@ -192,7 +197,7 @@ module.exports = function plot(gd, calcData) {
fontFamily: castHoverOption(obj, 'font.family'),
fontSize: castHoverOption(obj, 'font.size'),
fontColor: castHoverOption(obj, 'font.color'),
- idealAlign: d3.event.x < hoverCenterX ? 'right' : 'left',
+ idealAlign: d3.event.x < hoverCenter[0] ? 'right' : 'left',
hovertemplate: obj.hovertemplate,
hovertemplateLabels: hovertemplateLabels,
@@ -203,7 +208,8 @@ module.exports = function plot(gd, calcData) {
var tooltips = Fx.multiHovers(hoverItems, {
container: fullLayout._hoverlayer.node(),
outerContainer: fullLayout._paper.node(),
- gd: gd
+ gd: gd,
+ anchorIndex: anchorIndex
});
tooltips.each(function() {
diff --git a/test/image/mocks/sankey_circular_large.json b/test/image/mocks/sankey_circular_large.json
index 6af2352129..99c8af5835 100644
--- a/test/image/mocks/sankey_circular_large.json
+++ b/test/image/mocks/sankey_circular_large.json
@@ -220,10 +220,11 @@
[1, "#9467bd"]
]
}],
- "hovertemplate": "%{label}
%{flow.labelConcentration:%0.2f}
%{flow.value}"
+ "hovertemplate": "%{label}
flow.labelConcentration: %{flow.labelConcentration:0.2%}
flow.concentration: %{flow.concentration:0.2%}
flow.value: %{flow.value}"
}
}],
"layout": {
+ "hovermode": "x",
"width": 800,
"height": 800
}