Is there a possibility to simultaneously show the tooltips for all the data points in the series on hover of one any points?

Is there an option to setup Highcharts.js to show the tooltips for all the data points in the series on hover of any of the data point in that series?

E.g. something like this when green bar is hovered over:

I've found many solutions and managed to reproduce for showing multiple series on the same point, but nothing like this.

Thanks!

There is no built-in functionality for such tooltips, but you can relatively easily create it. It is enough to use the Highcharts.SVGRenderer class, add custom labels and show/hide them on mouseOver / mouseOut series events. The default tooltip uses really similar approach under the hood.

For example:

  tooltip: {
enabled: false
},
plotOptions: {
column: {
events: {
mouseOver: function() {
const chart = this.chart;
const points = this.points;
points.forEach(point => {
let customTooltip = point.customTooltip;
const text = `<span style="color:${this.color}">●</span> <span style="font-size: 0.8em">${this.name}</span><br/>x: ${point.x}, y: ${point.y}`;
const anchorX = point.tooltipPos[0] + chart.plotLeft;
const anchorY = point.tooltipPos[1] + chart.plotTop;
if (!customTooltip) {
customTooltip = point.customTooltip = chart.renderer
.label(text, anchorX, anchorY - 100, 'callout')
.attr({
align: 'center',
zIndex: 8,
stroke: point.color,
fill: 'rgba(155, 155, 155, 0.75)',
padding: 8,
r: 5
}).add();
} else {
customTooltip.show();
}
customTooltip.attr({
anchorX,
anchorY,
x: anchorX,
y: anchorY - customTooltip.height - 8
});
});
},
mouseOut: function() {
this.points.forEach(point => {
point.customTooltip.hide();
});
}
}
}
}

Live demo: http://jsfiddle.net/BlackLabel/h6ys735b/

API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label