CODEWITHSUNDEEP
phpjqueryhighcharts
Huzefa
Huzefa

Reputation: 31

how to add onclick event handler inside highcharts tooltip

I am using highcharts ( Line ) in my php application. I want to use onclick event handler inside the tooltip to open the modal dialog. But i don't find any solution for that, even in highcharts there is no click event available for tooltip item. I also used formatter option inside tooltip but it doesn't worked. Please help me in this issue

I am trying this 

tooltip: {
    useHtml: true,
    formatter: function () {
        var s = '<b>' + this.x + '</b>';
        $.each(this.points, function (i, point) {
            s += '<br/><span style="color:' + point.series.color + '">\u25CF</span>\n\ <span onclick="my_function();">Click Me</span> ' + point.series.name + ': ' + point.y;
        });
        return s;
    },
    shared: true
}

but my_function is not calling when i click on "Click Me"

Upvotes: 1

Views: 1678

Answers (2)

Huzefa
Huzefa

Reputation: 31

I got the answer on my query from highcharts

tooltip: {
    useHTML: true,
    formatter: function () {
        var s = '<b>' + this.x + '</b>';
        $.each(this.points, function (i, point) {
            s += '<br/><span style="color:' + point.series.color + '">\u25CF</span>\n\ <span onclick="my_function();">Click Me</span> ' + point.series.name + ': ' + point.y;
        });
        return s;
    },
    shared: true
}

I am doing a spelling mistake by using useHtml but it is actually useHTML. So now my problem is solved.

Upvotes: 2

andrew
andrew

Reputation: 9583

Try this, I added tooltipClick class to the span

{
    useHtml: true,
    formatter: function () {
        var s = '<b>' + this.x + '</b>';
        $.each(this.points, function (i, point) {
            s += '<br/><span style="color:' + point.series.color + '">\u25CF</span>\n\ <span class="tooltipClick">Click Me</span> ' + point.series.name + ': ' + point.y;
        });
        return s;
    },
    shared: true
}

And delegated an event handler

$(document).on('click','.tooltipClick',function(){
      console.log($(this).parent()); //get the tooltip
      alert('a toolip was clicked')
});

Upvotes: 0

Related Questions