Chart not rendering animation completely

Expected Behavior

Animation rendering should reach 100%.

Progress measured as progress = Math.floor(animation.animationObject.currentStep * 100 / animation.animationObject.numSteps)

Current Behavior

Animation is not rendered completely and stops at 3%.

Possible Solution

-

Steps to Reproduce (for bugs)

Angular Example

• Open https://stackblitz.com/edit/angular-k1nuch (https://angular-k1nuch.stackblitz.io)
• Open console logs.
• Click on Chart One tab.

Animation rendering stops at 3%

The component <app-chart> is rendered only after the Chart One tab is selected - you can verify this by checking the logs for ngAfterViewInit event. So, the animation is not happening in the background as soon as the page opens (when on Home tab). Therefore, this is not the reason why the animation is not being seen/rendered. The issue is beyond this.

The chart is rendered and animation starts only after user clicks on the Chart One tab. You can verify this by checking the console logs. Yet, the animation stops at 3% and the user doesn’t see the animation.

Moreover, I’ve set the animation duration as 5000 (for testing), yet it doesn’t animate for even for 1 second. Same behavior even if I don’t set the animation duration to anything (defaults).

I feel there’s something that’s interrupting the animation and abruptly rendering the chart.

Update:

If I render the chart using a setTimeout of 500ms, the animation loads correctly. You can see this behavior in the Chart Two tab. However, I want to avoid this since it leads to a slightly bad user experience.

Context

I am trying to render a chart only after the user clicks on a Bootstrap navigation tab so that the user can see the animation of the chart in that tab.

Environment

• Chart.js version: 2.9.2
• Browser name and version: Chrome Version 78.0.3904.97 (Official Build) (64-bit)
• Link to your project: https://stackblitz.com/edit/angular-k1nuch (https://angular-k1nuch.stackblitz.io)

[stockiNail]

@abhilash1in If I may add another info on issue, adding the following config into animation object:

          onComplete: function(animation) {
            console.log("complete!");
          }, 

The strange thing is Chart.js invokes the onComplete callback when the progress is at 3% therefore for Chart.js the rendering is completed

[kurkle]

onComplete fires for each chart individually after #6845, fixing the issue.