How do I increase the clickable area of a point in Highcharts so that whenever the point is 'active' a click can be recorded?

Question

Slightly convoluted question, I apologise, but let me explain further.

With a line chart in Highcharts.js, moving your mouse into the area of the point hovers over the point and loads the tooltip. I have some click event operations working fine, but I would like to modify them so that you can 'click' the points when the mouse is not actually over them but simply within range to hover over the point.

How would I go about doing this?

Answer 1

From highcharts website

http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/chart/events-click/

chart: {
    events: {
        click: function (event) {
            var label = this.renderer.label(
                    'x: ' + Highcharts.numberFormat(event.xAxis[0].value, 2) + ', y: ' + Highcharts.numberFormat(event.yAxis[0].value, 2),
                    event.xAxis[0].axis.toPixels(event.xAxis[0].value),
                    event.yAxis[0].axis.toPixels(event.yAxis[0].value)
                )
                    .attr({
                        fill: Highcharts.getOptions().colors[0],
                        padding: 10,
                        r: 5,
                        zIndex: 8
                    })
                    .css({
                        color: '#FFFFFF'
                    })
                    .add();

            setTimeout(function () {
                label.fadeOut();
            }, 1000);
        }
    }
}