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'.

Hey, change function(event) to (event) =>. – Martinator Jan 10 '20 at 14:54 — Martinator, Jan 10 '20 at 14:54

Andrei Tătar · Accepted Answer · 2018-04-25T14:03:39.133

5

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/

edited Apr 25 '18 at 14:03

answered Apr 25 '18 at 13:23

Andrei Tătar

7,872
19
37

I have tried using way: `chart.options.plotOptions.series.point.events.click = (event) => this.clickBars(event);` but I am not able to find any function in `this`. So not able to attach it. – Tavish Aggarwal Apr 25 '18 at 13:37
can you post exactly the message you get? is it a runtime error? – Andrei Tătar Apr 25 '18 at 13:49
1

@TavishAggarwal that's because you are using function, not arrow function. The function doesn't capture `this`. I assume the clickBars is a method on your controller or something. Read: https://stackoverflow.com/questions/34361379/arrow-function-vs-function-declaration-expressions-are-they-equivalent-exch – Andrei Tătar Apr 25 '18 at 13:53
Updated question again. – Tavish Aggarwal Apr 25 '18 at 13:56
@AndreiTătar made a good point here regarding the arrow function. I was using the function based on the jsfiddle provided by highcharts api documentation. If I used the function, I could not pass the updated variables out of the chart into other components/functions. – griffinleow Apr 07 '20 at 01:27

score 1 · Answer 2 · answered Sep 09 '19 at 14:07

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>

Click event on bar high charts in angular 2

2 Answers2