AnimationsOptions

Namespace: Wisej.Web.Ext.ChartJS4.Models

Assembly: Wisej.Web.Ext.ChartJS4 (4.1.0.0)

ChartModelBase
- OptionsBase
  - AnimationsOptions

Animation options.

C#
VB.NET

public class AnimationsOptions : OptionsBase

Public Class AnimationsOptions
    Inherits OptionsBase

Represents a Chart.js animation configuration (duration, easing, delay, loop). An instance is typically assigned to Animation to configure the global animation. Only values that differ from their defaults are sent to the client, and additional Chart.js animation properties (e.g. from, to, type) can be supplied through ExtensionData.

Example:

var chart = new ChartJS4();
chart.ChartOptions.Animation = new AnimationsOptions
{
    Duration = 2000,
    Easing = "easeOutBounce",
    Delay = 250
};

Constructors

AnimationsOptions()

Initializes a new instance of AnimationsOptions.

Properties

Delay

Int32: Returns or sets the delay, in milliseconds, before starting the animation. (Default: 0)

Value: An Int32 in milliseconds. The default is 0. Maps to the Chart.js delay option.

Example:

var animation = new AnimationsOptions { Delay = 300, Duration = 800 };
chart.ChartOptions.Animation = animation;

Duration

Int32: Returns or sets the number of milliseconds an animation takes. (Default: 1000)

Value: An Int32 in milliseconds. The default is 1000. Maps to the Chart.js duration option.

Set it to 0 to disable the animation.

Example:

var animation = new AnimationsOptions { Duration = 500 };
chart.ChartOptions.Animation = animation;

Easing

String: Returns or sets the easing function to use. Available options: 'linear', 'easeInQuad', 'easeOutQuad', etc. (Default: null)

Value: The name of a Chart.js easing function. The default is null (Chart.js default "easeOutQuart"). Maps to the Chart.js easing option.

Accepted values: "linear", and the easeIn/easeOut/easeInOut variants of Quad, Cubic, Quart, Quint, Sine, Expo, Circ, Elastic, Back and Bounce (e.g. "easeInOutCubic", "easeOutBounce").

Example:

var animation = new AnimationsOptions { Easing = "easeInOutCubic" };
chart.ChartOptions.Animation = animation;

Loop

Boolean: Returns or sets whether the animation loops endlessly. (Default: False)

Value: true to repeat the animation indefinitely; otherwise false. The default is false. Maps to the Chart.js loop option.

Example:

var animation = new AnimationsOptions { Duration = 1500, Loop = true };
chart.ChartOptions.Animation = animation;