I am trying to format the tooltip in a highcharts bubble chart
There is a lot of information I'd like to display with custom formats etc so I'm using the formatter function. It is all working fine except for the last line which is a html link (href tag). I want to be able to click on this link in the tooltip and be redirected to the new page however, currently, even though I can see the row highlighted with a link, I'm not being able to click on the link when it renders in the tooltip
Here's the code
const chartOptions = {
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy',
height: 600,
},
title: {text: null},
legend: {
enabled: true
},
tooltip: {
useHTML: true,
formatter: function () {
return '<b>' + Highcharts.dateFormat('%e-%b', new Date(this.x)) + ' ' + this.y + '</b><br/>' +
'<b>' + 'ACV: ' + '</b>'+ '$' + Math.round(this.point.ACV / 1000).toFixed(1) + 'K' + '<br/>' +
'Type: ' + this.point.OPP_COB + '<br/>' + 'Name: ' + this.point.REP_NAME + '<br/>' +
'Link: ' + '<a href="http://www.mywebsite.com/"' + this.point.customID + ' target="_blank"> Click here </a>'
}
},
}
I've tried lots of options for a while but haven't had any luck. Any help would be much appreciated. Thanks
You need to set pointerEvents property to 'auto':
tooltip: {
style: {
pointerEvents: 'auto'
}
}
Live demo: http://jsfiddle.net/BlackLabel/7nrvsp5y/
API Reference: https://api.highcharts.com/highcharts/tooltip.style