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

slightly convoluted question, apologise, let me explain further.

with line chart in highcharts.js, moving mouse area of point hovers on point , loads tooltip. have click event operations working fine, modify them can 'click' points when mouse not on them within range hover on point.

how go doing this?

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);         }     } }