I'm trying to increase the hover detection radius for scatter points in HighCharts, but I've found no official way of doing it.
Essentially, I want each point to have an invisible radius that triggers the hover effect when the mouse enters it.
I know stickyTracking exists, but in my case it feels a bit too sticky.
Turning it off, however, means having to be extremely precise before the tooltip shows up.
StickyTracking off: https://jsfiddle.net/wsxkLn25
StickyTracking on: https://jsfiddle.net/wsxkLn25/1/
Is there a way to trigger the hover effect on a point before the mouse enters the actual radius of the point without stickyTracking?
There is no such feature in Highcharts, but you can implement it by enabling sticky tracking and process the internal getHoverData method only if a hovered point is close enough to a mouse cursor. Example:
(function(H) {
H.wrap(H.Pointer.prototype, 'getHoverData', function(proceed, existingHoverPoint, existingHoverSeries, series, isDirectTouch, shared, e) {
var hoverData = proceed.apply(this, Array.prototype.slice.call(arguments, 1));
var RADIUS = 20;
var point = hoverData.hoverPoint;
var chart = this.chart;
var plotX;
var plotY;
if (point) {
plotX = point.plotX + chart.plotLeft;
plotY = point.plotY + chart.plotTop;
if (
plotX + RADIUS > e.chartX && plotX - RADIUS < e.chartX &&
plotY + RADIUS > e.chartY && plotY - RADIUS < e.chartY
) {
return hoverData;
} else if (chart.hoverPoint) {
chart.hoverPoint.setState('');
chart.tooltip.hide();
}
}
return {
hoverPoint: null,
hoverPoints: [],
hoverSeries: null
};
});
}(Highcharts));
Live demo: https://jsfiddle.net/BlackLabel/sb35j0ov/
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts