Class: Animation

CIQ. Animation

new Animation(stx, animationParameters, easeMachine)

Add-On that animates the chart.

Requires addOns.js

The chart is animated in three ways:

  1. The current price pulsates
  2. The current price appears to move smoothly from the previous price
  3. The chart's y-axis smoothly expands/contracts when a new high or low is reached

The following chart types are supported: line, mountain, baseline_delta


Name Type Description
stx CIQ.ChartEngine

The chart object

animationParameters object

Configuration parameters

Name Type Argument Default Description
stayPut boolean <optional>

Set to true for last tick to stay in position it was scrolled and have rest of the chart move backwards as new ticks are added instead of having new ticks advance forward and leave the rest of the chart in place.

ticksFromEdgeOfScreen number <optional>

Number of ticks from the right edge the chart should stop moving forward so the last tick never goes off screen (only applicable if stayPut=false)

granularity number <optional>

Set to a value that will give enough granularity for the animation. The larger the number the smaller the price jump between frames, which is good for charts that need a very slow smooth animation either because the price jumps between ticks are very small, or because the animation was set up to run over a large number of frames when instantiating the CIQ.EaseMachine.

tension number <optional>

Splining tension for smooth curves around data points (range 0-1). Must include splines.js for this to be effective.

easeMachine CIQ.EaseMachine

Override the default easeMachine. Default is new CIQ.EaseMachine(Math.easeOutCubic, 1000);


  • • 3.0.0 Now part of addOns.js. Previously provided as a standalone animation.js file
    • 4.0.0 beacon only flashes for line charts. On Candles or bars it is suppressed as it produces an unnatural effect.
new CIQ.Animation(stxx, {tension:0.3});  //Default animation with splining tension of 0.3