CODEWITHSUNDEEP
angularhighchartstooltip
Andrew
Andrew

Reputation: 16

Highcharts: Handling ng-click on tooltips

I need some help with a problem I am encountering. I created a chart and a custom tooltip, whenever the user clicks on the tooltip, it should call the $scope function.

        tooltip: {
            pointFormatter: function() {
              return $compile(angular.element("<p style='color:red' ng-click='handleClick()'>Click here</p>"))(scope);
            }
        }

I created a jsfiddle for it.

Thanks!

Upvotes: 0

Views: 1219

Answers (1)

morganfree
morganfree

Reputation: 12472

Compile the tooltip element after the tooltip appears.

In the pointFormatter return string:

pointFormatter: function() {              
  return "<p style='color:red' ng-click='handleClick()'>Click here</p>"
}

In the click callback:

events: {
  click: function(e) {
    tooltip.refresh(e.point, e);
    $compile(tooltip.label.div)(scope)
  }

example: http://jsfiddle.net/mj9mj1n5/

Upvotes: 1

Related Questions