score:1

Accepted answer

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


Related Query

More Query from same tag