The seriesTransition option is used to animate the series in the chart when just their values change. This is helpful for visually showing changes in data for the same series.
Type: Object
Default: {enabled:true, duration:400, easing: "bounce"}
Note: When programmatically updating the seriesList with a different number of series in the array make sure to disable seriesTransition like the following:
duration
A value that indicates the duration in milliseconds for the series transition.
Type: Number
Default: 400
easing
A value that indicates the easing effect applied to the seriesTransition during the animation.
Type: String
Default: "bounce"
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 to show animation on reloading the chart.
Type: Boolean
Default: true
Code Example:
WinJS.UI.setOptions(document.getElementById("wijbarchart").winControl, {
seriesTransition: {
enabled: true,
duration: 1000,
easing: "elastic"}
});