Angular2 and charts.js interaction

Question

I am currently working with some charts from charts.js, I add some simple interaction to them, when the user clicks on the panel from the histogram, the variable saves which panel was clicked on.

This variable updates the line chart, this chart is updated with data previously stored in the array, so every time the user clicks on another panel from the histogram, the line chart should change.

My problem is that the variable does not change, I get two different values. By default, the variable is initialized to 0.

Console Log Output:

from barchart click:3 from change function:0 from barchart click:2 from change function:0 

I print these lines from two different functions that happen simultaneously.

This is a function that should change the value of a variable when a bar is pressed on the histogram.

  graphClickEvent(event:any, array:any){ if(array[0]){ this.offsetGraficas = array[0]._index; console.log("from barchart click:"+this.offsetGraficas); } } 

and this other function that happens simultaneously:

 changeHistorico(n:number) { console.log("from change function:"+this.offsetGraficas); this.show_historico = true; //some unrelated code goes here } 

from what I see, graphClickEvent is executed first, but I do not change this variable. Why does this not work as intended?

Answer 1

It looks like the "this" in graphClickEvent and the "this" in changeHistorico are different.