Click event on bar high charts in angular 2

Question

How can I add angular 2 click event to high chart with chart type as bar? I am trying to use using code below:

let chart = new highCharts.Chart('container', Class1.createBarChart());
chart.series.click = this.clickBars();

clickBars() {
  console.log('bar clicked');
}

I don't want to use <chart> directives because of technical limitations. Also I don't want to call click event in high charts configuration object. Please let me know appropriate solution for it.

EDITED:

I have tried below code based on suggestion:

 chart.options.plotOptions.series.point.events.click = (function(event) { this.clickBars(event) }).bind(this);

But here this.clickBars is coming as undefined. Though I have created a function in my class.

If I am using code like:

chart.options.plotOptions.series.point.events.click = (event) => this.clickBars(event);

Then it is returning 'Illegal return statements'.

Answer 1

I do it when adding the series:

chart.addSeries({
  ...
  events: {
    click: (event: AreaClickEvent) => this.clickBars(event),
  },
});

You can also register the click handler once in the plotOptions. Something like:

chart.options.plotOptions.series.events.click = (event) => this.clickBars(event);

Update

It seems you also need to call update. Here is a jsfiddle that works: http://jsfiddle.net/80k0ojyh/

Answer 2

I hope this will help. In the template that call highcharts-chart add the click ouput decorator as for any DOM element. In the event got there will be the point information. Just now declare in your component (ts file) the function onPointSelect.

Template

<highcharts-chart 
  [Highcharts]="Highcharts"

  [constructorType]="chartConstructor"
  [options]="chartOptions"
  [callbackFunction]="chartCallback"
  (click)="onPointSelect($event)"
  [(update)]="updateFlag"
  [oneToOne]="oneToOneFlag"


  style="width: 100%; display: block;"
>

</highcharts-chart>