Call an angular component method when we click on highchart series

Question

I use angular2-highcharts and I want to call a component method in a local function but I don\'t know how it could be possible.

Could you help me ? A plunker examp

Answer 1

You just need to replace the anonymous function by an arrow function or bind it to the component:

point: {
    events: {
        click: () => {
            console.log(this);
            // I want to call a component method here
        }
    }
}

or

point: {
    events: {
        click: (function(){
            console.log(this);
            // I want to call a component method here
        }).bind(this)
    }
}

or even :

point: {
    events: {
        click: this.myComponentMethod.bind(this)
    }
}

Answer 2

I know i am late here but his might help someone. The angular2-highchart package does provide the access to series event.

<chart [options]="options">
  <series (click)="methodToCall($event)"
  </series>
</chart>
 <p>Series-Clicked={{data}}</p>

JS code.

methodToCall(e){
    console.log("Method called");
   this.data = e.originalEvent.point.name
}

Here is the updated Plunk.

Answer 3

To have access to the informations that the click event returns and also have access to your component methods you can do something like this:

plotOptions: {
            series: {
                turboThreshold:3000,
                cursor: 'pointer',
                point: {
                    events: {
                        click: function(e){
                           const p = e.point
                           this.myComponentMethod(p.category,p.series.name);
                        }.bind(this)
                    }
                }
            }
        },

I hope this will help.