Highcahrts links and buttons in tooltips not working

Question

I'm trying to trigger a click event from inside a tooltip. I put a button with click event in it but it doesn't work. I also tried adding external links inside the tooltip. It doesn't work either. I am able to get the style of the element but not the click event that was fired.

This is the tooltip configuration

tooltip: {
    useHTML: true,
    style: {
      pointerEvents: 'auto'
    },
    formatter: function(e) {
        return '<div>'+this.x + ': ' + this.y +'<br><a href="www.google.com">Click Me</a><br><button onclick="clicked()" >Hello</button></div>'
    }
}

Here's what I've tried so far: http://jsfiddle.net/kolliparavamsikrishna/eytroh53/

Answer 1

For security reasons, Highcharts filters all HTML added via the chart options structure by default. The onclick attribute is potentially risky and is therefore filtered.

To be able to use the onclick attribute, add it to the allowedAttributes table:

Highcharts.AST.allowedAttributes.push('onclick');

---

Live demonstration: http://jsfiddle.net/BlackLabel/om32w81g/

Documentation: https://www.highcharts. com/docs/chart-concepts/security

API Reference: https:// api.highcharts.com/class-reference/Highcharts.AST#.allowedAttributes