Calling a TypeScript function from a Chart.js option callback

Question

I'm using a wrapper for Chart.js which allows for an animation callback to determine when the chart is done drawing.

So, my chart options look like this:

public chartOptions: any = {
    animation: {
        duration: 2000,
        onComplete: function () {
            //alert('anim complete');
            this.chartTestMethod();
        }
    },
    responsive: true
};

and my chartTestMethod() looks like this:

chartTestMethod() {
     console.log('chartTestMethod called.');
}

My hope is to have the method chartTestMethod() (which is in the same TypeScript file) called when the chart animation is complete. However, when the animation is complete and that method call line is executed, I get the error:

TypeError: this.chartTestMethod is not a function.

Basically, how can I call that method properly?

sgrtho · Accepted Answer · 2016-07-14 18:49:44Z

7

I imply that your chartTestMethod is in the same class as chartOptions since you're using it on this. You should make sure you understand how this is handled in JavaScript (and TypeScript being a superset of JavaScript). There must be a million references out there.

Without knowing anything about Chart.js, I think it is safe to assume that in no way the this context fits your class instance when onComplete is invoked. So what you want is an arrow function, like this:

onComplete: () => { this.chartTestMethod(); }

Read about TypeScript arrow function to understand how to make sure this is actually pointing to your instance.

answered Jul 14, 2016 at 18:49

sgrtho

2181 silver badge6 bronze badges

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

4 Comments

user6586783 Over a year ago

Firstly, it doesn't solve OP's problem, because it is the same as defining function as an key of an object. Secondly, arrow function is not available in all ECMAScript versions.

sgrtho Over a year ago

The question is labelled "typescript" and unless the OP chooses a target supporting arrow functions it will be emulated using closure. In any case, using an arrow function "this" will point to the instance of whatever contains chartOptions.

Roka545 Over a year ago

Thanks for the input guys. sgrtho's answer worked perfectly for me.

Zaker Over a year ago

@sgrtho Then how can we access the data.datasets in Chart.helpers.each(this.data.datasets.forEach((dataset, i) within oncomplete

score 1 · Accepted Answer · 2016-07-14 18:51:47Z

You got an error because this if referring to the object where function is executing. In your case, this is referring to any.animation object which do not have chartTestMethod key. You can solve it depending on where chartTestMethod is defined. If it is defined in global object, you can just remove this keyword. You can rewrite your code like this

function chartTestMethod(){
    console.log('chartTestMethod called.');
}

any = {
    animation: {
        duration: 2000,
        onComplete: function (){
            chartTestMethod();
        }
    },
    responsive: true
};

Also, if you want this method to be in the same object, you can do this

any = {
    animation: {
        duration: 2000,
        onComplete: function (){
            this.chartTestMethod();
        },
        chartTestMethod: function(){
            console.log('chartTestMethod called.');
      }
    },
    responsive: true
};

Willie Cheng · Accepted Answer · 2019-09-20 03:39:42Z

0

you can use bind(this) 

public chartOptions: any = {
    animation: {
        duration: 2000,
        onComplete: function () {
            //alert('anim complete');
            this.chartTestMethod();
        }.bind(this)
    },
    responsive: true
};

edited Sep 20, 2019 at 3:39

Willie Cheng

8,36314 gold badges63 silver badges72 bronze badges

answered Sep 20, 2019 at 2:56

張家祥

1

Collectives™ on Stack Overflow

Calling a TypeScript function from a Chart.js option callback

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related