Chart Animation

Reference External Link

Chart.js animates charts out of the box. A number of options are provided to configure how the animation looks and how long it takes.

Namespace: options.animation or options.animations[animation]

.Options(o => o
	.Animations(a => a
		.Animation("tension")
		.Duration(1000)
		.Easing(AnimationEasing.Linear)
		.Loop(true)
		.From(1)
		.To(0))
	.Scales(s => s
		.ScaleId("y")
		.Min(0)
		.Max(100)
	)
)

"options": {
	"scales": {
	  "y": {
		"min": 0,
		"max": 100
	  }
	},
	"animations": {
	  "tension": {
		"duration": 1000,
		"easing": "linear",
		"loop": true,
		"from": 1,
		"to": 0
	  }
	}
}

Animation

Set animation like: "x", "y", "borderWidth", "radius", "tension" External Link

.Animation("tension")

Duration

The number of milliseconds an animation takes. Default 1000

.Duration(2000)

Easing

Easing function to use. Default 'easeOutQuart' External Link

.Easing(AnimationEasing.Linear)

Delay

Delay before starting the animations.

.Delay(500)

Loop

If set to true, the animations loop endlessly.

.Loop(true)

OnProgress

Callback called on each step of an animation.

.OnProgress("functionName")

OnComplete

Callback called when all animations are completed.

.OnComplete("functionName")

From

Start value for the animation. Current value is used when undefined.

.From(true)

Or, number:

.From(0)

Or, color:

.From("green")

To

End value for the animation. Updated value is used when undefined

.To(true)

Or, number:

.To(1)

Or, color:

.To("yellow")