Skip to content

Animation

Reference

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]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
.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)
    )
)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
new Chart(document.getElementById('canvasId'),
{
  "data": {
    "labels": [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July"
    ],
    "datasets": [
      {
        "fill": false,
        "data": [
          65.0,
          59.0,
          80.0,
          81.0,
          26.0,
          55.0,
          40.0
        ],
        "label": "Looping tension",
        "type": "line",
        "borderColor": "rgb(75, 192, 192)"
      }
    ]
  },
  "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" 

.Animation("tension")

Duration

The number of milliseconds an animation takes. Default 1000 

.Duration(2000)

Easing

Easing function to use. Default 'easeOutQuart' 

.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")