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 plete');
            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 plete. However, when the animation is plete 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?

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 plete');
            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 plete. However, when the animation is plete 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?

• javascript
• charts
• typescript
• angular
• chart.js

3 Answers 3

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.

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
};

you can use bind(this) 

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