score:7

Accepted answer

Change pointer events property of the tooltip to 'auto'.

  tooltip: {
        // pointFormat: '<div>{point.date}<br\>{point.air}<br\>${point.y}</div><button>test</button>',
    useHTML: true,
    formatter: function() {
            return '<div>'+this.point.date+'<br\>'+this.point.air+'<br\><span>$'+this.y+'</span><br\><a href="http://www.w3schools.com">testtesttest</a></div>';
    },
    style: {
      pointerEvents: 'auto'
    }
},

Live example

http://jsfiddle.net/emzmvth4/1/

score:2

Links in tooltips are a little tricky - particularly when you have lots of points close together, as the tooltip will move onto the next point before you can move your mouse over the link.

Because of this you may be better off adding a 'url' property to each point and then defining a click function for the point itself like this:

    plotOptions: {
    series: {
        point: {
            events: {
                click: function () {
                    location.href = this.options.url;
                }
            }
        }
    }

API docs

Highcharts demo (bar chart)


Related Query

More Query from same tag