Changing value of variable in Highcharts selection event in angular

Question

To begin with here is a code extract in angular 7+ using Highcharts API:

export class TestComponent implements OnInit{
    seek: boolean = false;
    exampleChart;
    public options = {
        chart:{
            zoomType: 'x',
            events: {
                selection: function(event){
                    this.seek = true;
                    console.log(this.seek); // outputs to true
                }
            }
        },
        xAxis:{
            type:'datetime'
        }
        series:{
            // given relevant datetime values
        }
    };

    constructor(){}
    ngOnInit{
        this.exampleChart = this.options;
    }

    onClick(){
        console.log(this.seek); // outputs false
    }

}

Scenario : First i am selecting a particular portion in the graph and then clicking the button

Since the zoomtype is on x-axis, i can zoom in/out and the selection event gets fired with the correct event value. However i am also changing the value of seek in that event to be true. This change does not get reflected to the original seek , as on pressing the button and calling the onClick() function the value of seek in the console outputs to false. I do not know why it is happening like that and how to get the correct value.

This might be cause of wrong context. Did u try an arrow function? selection: (event) => { this.seek = true; } — sagat
– sagat, Commented Apr 29, 2020 at 20:59
Thank you man. Your solution works. But how did you come up with that, and what syntax was i using, the AngularJS one? — KL_KISNE_DEKHA_HAI
– KL_KISNE_DEKHA_HAI, Commented Apr 30, 2020 at 5:53
this is a weird part about functions in js, as they have their own this context. Arrow functions dont. regards — sagat
– sagat, Commented Apr 30, 2020 at 14:16
One thing i wanted to know however, like since the normal functions have their own context, does this mean that this in( this.seek ) inside the normal function is kind of defined on its own, and outside the variable just takes whatever value is assigned to it out of that scope? i mean, how come since it is assigned a true value inside the normal function, the assignment is of no use later? — KL_KISNE_DEKHA_HAI
– KL_KISNE_DEKHA_HAI, Commented May 1, 2020 at 11:57

KL_KISNE_DEKHA_HAI · Accepted Answer · 2020-05-01 12:02:40Z

0

The correct answer as suggested by @sagat :

public options = {
        chart:{
            zoomType: 'x',
            events: {
                selection: (event)=> {
                    this.seek = true;
                    console.log(this.seek); // outputs to true
                }
            }
        },
        xAxis:{
            type:'datetime'
        }
        series:{
            // given relevant datetime values
        }
    };


constructor(){}
    ngOnInit{
        this.exampleChart = this.options;
    }

    onClick(){
        console.log(this.seek); // outputs true
    }

Thank you.

edited May 1, 2020 at 12:02

answered Apr 30, 2020 at 5:55

KL_KISNE_DEKHA_HAI

68912 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Changing value of variable in Highcharts selection event in angular

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related