CODEWITHSUNDEEP
javascripthighchartstooltip
Mtq
Mtq

Reputation: 53

How to add clickable HTML-link into tooltip in Highcharts 5.0.x?

I have following configuration for Highcharts tooltip:

    tooltip: {
        useHTML: true,
        style: {
            padding: 0
        },
        formatter: function () {
            return '<a href="http://google.com">' + this.x + ': ' +  this.y + '</a>'
        }
    }

Example: http://jsfiddle.net/maLqoyge/2/

The link inside the tooltip is visible but it seems not possible to hover mouse over it: the link doesn't get underlined and the mouse cursor does not change. It is also not possible to open the URL by clicking the link.

In Highcharts 3.0.10 similar tooltip still worked. Is it possible to make link inside a tooltip to function someway also in Highcharts 5.0.x?

Upvotes: 0

Views: 1505

Answers (2)

Mitesh Pant
Mitesh Pant

Reputation: 542

In you chart, add this portion to handle click events.

$(function () {
    Highcharts.chart('container', {
        title: {
            text: 'Full HTML tooltip with border, background and shadow'
        },

        tooltip: {
            useHTML: true,
            style: {
                padding: 0
            },
            formatter: function () {
                return '<a href="http://google.com">' + this.x + ': ' +  this.y + '</a>'
            }
        },chart : {
                    events :{
        click : function(event){

        var url = 'http://google.com/#q='+event.chartX+': ' + event.chartY;
        window.open(url,'_blank');
        }
        }},
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });
});

Upvotes: 0

morganfree
morganfree

Reputation: 12472

You have to set tooltip.style.pointerEvents to 'auto'.

tooltip: {
  useHTML: true,
  style: {
    padding: 0,
    pointerEvents: 'auto'
  },
  formatter: function() {
    return '<a href="http://google.com">' + this.x + ': ' + this.y + '</a>'
  }
},

example: http://jsfiddle.net/zfwx6s9q/

Upvotes: 1

Related Questions