How to call typescript function inside High chart click event

Question

MyHighChartComponent.ts

export class MyHighChartComponent {
    highchartsConfiguration: any = {
        chart: {
            events: {
                click(e) {
                    if (!($(event.target)[0].textContent)) {
                        console.log('clicked'); //this is printing
                        this.drillDown(); // how to call typescript function here?
                    }
                },
            },
        }
    };  

    drillDown() {
      console.log('drill down method called');
    }
}

How to call a typescript function from inside high charts click event?

I'm getting below error

Error Stack : TypeError: this.drillDownis not a function

@toskv it's valid, but I have not posted the entire code since it is not required. Just wanted to know how to call drillDown method — Pratap A.K
– Pratap A.K, Commented Jun 25, 2017 at 11:52
the code you posted is not valid javascript code.. the click(e) {} is not valid js.. all you're missing is the use of an arrow function for the click handler that's all. — toskv
– toskv, Commented Jun 25, 2017 at 12:37
@toskv This would solve the problem for him, but not in all cases. I, for example, have the case that I need access to the unterlying chart object of highcharts, which is the 'this' context in this function when used without lambda. If I would use lamda now, I would loose access to the chart object, or at least, would have to get a reference myself. But if I use a function, I can't call any methods on my ts class object, because 'this' points to the chart object of highcharts. — Benjamin Jesuiter
– Benjamin Jesuiter, Commented Jul 17, 2018 at 10:37
@BenjaminJesuiter I updated the answer to fit your need as well. it's not that pretty but it should work. — toskv
– toskv, Commented Jul 17, 2018 at 11:03

toskv · Accepted Answer · 2018-07-17 11:03:11Z

4

You must use an arrow function to preserve the same context (this) in the click handler.

It would look like this:

export class MyHighChartComponent {
    highchartsConfiguration: any = {
        chart: {
            events: {
                click : (e) => {
                    if (!($(event.target)[0].textContent)) {
                        console.log('clicked'); //this is printing
                        this.drillDown(); // how to call typescript function here?
                    }
                },
            },
        }
    };  

    drillDown() {
      console.log('drill down method called');
    }
}

If you need access to both the chart context and the class context you can manually save the class context in a variable (the way you'd do it before arrow functions were a thing).

class MyHighChartComponent {
  public highchartsConfig() {
    var that = this; // store this in a variable to use later
    return {
      chart: {
        events: {
          click: function(e) {
            if (!($(event.target)[0].textContent)) {
              console.log('clicked');
              // this variable now stores the chart
              // call methods on class using the that variable
              that.drillDown();
            }
          },
        },
      }
    };

  }
  public drillDown() {}
}

edited Jul 17, 2018 at 11:03

answered Jun 25, 2017 at 12:39

toskv

31.8k7 gold badges77 silver badges77 bronze badges

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

1 Comment

Sathishkumar Over a year ago

Is this works same as for column point click???

Collectives™ on Stack Overflow

How to call typescript function inside High chart click event

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related