0

I'm using the AngularJS with Highcharts (using a highcharts directive).

I'm trying to give a chart a click event, so that when I click on the point I assign the (x,y) coords to a variable (say vm.selectedPoint). I then use this variable to construct another graph.

The problem is that it doesn't seem possible to extract the clicked point in a simple way. Say the click event function is defined as

vm.clickFunction = function(e) { console.log(this.point) };

then if I set plotOptions.series.events.click = vm.clickFunction, we have an issue with the component scope (of angularJS) conflicting with the Highcharts scope - 'this' isn't referring to the point on the graph I clicked.

I'm surprised I haven't found anywhere that refers to this. Does anyone have a suggestion?

Proxy123
  • 5
  • 2
  • You can use an arrow function or `bind()` to prevent similar situations. You can find more information about it in the following SO thread: https://stackoverflow.com/a/20635010/12285185. If it's not enough for you please reproduce the problem in an online editor that I could work on so I can prepare a more detailed answer. – Mateusz Kornecki Sep 25 '20 at 07:22
  • Thanks, I managed to use this to create a very hacky solution. I did clickFunction.bind(event), which for some reason made 'this' return the entire document, i.e. this.target was document. Then if you go to defaultView.Highcharts.charts[0].hoverPoint you can get the clicked point. Ideally there would be some way to access the clickedPoint variable, but I can't find it anywhere. Oh well. – Proxy123 Sep 25 '20 at 09:55

0 Answers0