CODEWITHSUNDEEP
javascripthighcharts
Jabbl
Jabbl

Reputation: 69

Highcharts increase hover detection for markers

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?

Upvotes: 0

Views: 215

Answers (1)

ppotaczek
ppotaczek

Reputation: 39069

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

Upvotes: 1

Related Questions