Chartjs-Ng2 charts – Animation doesn't work on line chart onInit

by

2👍

You need to specify animation type in order to overwrite the default behavior, like this:

animation: {
      animateScale: true,
      animateRotate: true,
      duration: 2000,
      easing: 'easeInOutElastic',
    }

where:

 easing: Easing = 'linear' | 'easeInQuad' | 'easeOutQuad' | 'easeInOutQuad' | 'easeInCubic' | 'easeOutCubic' | 'easeInOutCubic' |
    'easeInQuart' | 'easeOutQuart' | 'easeInOutQuart' | 'easeInQuint' | 'easeOutQuint' | 'easeInOutQuint' | 'easeInSine' | 'easeOutSine' |
    'easeInOutSine' | 'easeInExpo' | 'easeOutExpo' | 'easeInOutExpo' | 'easeInCirc' | 'easeOutCirc' | 'easeInOutCirc' | 'easeInElastic' |
    'easeOutElastic' | 'easeInOutElastic' | 'easeInBack' | 'easeOutBack' | 'easeInOutBack' | 'easeInBounce' | 'easeOutBounce' | 'easeInOutBounce';

If you want to triger onComplete() or onProgress(), they could also be defined.

Leave a comment