The animation option defines the animation effect and controls other aspects of the chart's animation, such as duration and easing.
Type: Object
Default: {enabled:true, duration:400, easing: ">" }
duration
The duration option defines the length of the animation in milliseconds
Type: Number
Default: 400
easing
Sets the animation easing effect that the user experiences when the chart loads. For example, a user can have the wijbarchart bars bounce several times as they load.
Type: String
Default: ">"
Values available for the animation easing effect include the following:
•"linear" – The animated item's velocity is steady as it moves from one point to another.
•"<" or "easeIn" – Begins at full velocity and decelerates
•">" or "easeOut" – Begins at zero velocity and accelerates
•"<>" or "easeInOut" – Begins at full velocity until halfway and then slows. After the halfway point, it accelerates again.
•"backIn" – Moves back before reaching full velocity.
•"backOut" – Begins at full velocity, passes the end point, and then moves back.
•"elastic" – Begins at full velocity and decelerates, moves beyond the end point, and then snaps back.
•"bounce" - Begins at full velocity and decelerates until it reaches the end point and bounces. With a longer duration, the item being animated will bounce more.
enabled
A value that determines whether or not the animation effects occur.
Type: Boolean
Default: True
Code Example:
WinJS.UI.setOptions(document.getElementById("wijbarchart").winControl, {
animation: {
enabled: true,
duration: 1000,
easing: "<"
}
});