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.

Chart aggregations such as Kagi, Renko, Range Bars, etc. are not supported.

Animation displays more gracefully when updates are sent into the chart one at a time using CIQ.ChartEngine#updateChartData instead of in batches using a QuoteFeed. Sending data in batches will produce a ‘jumping’ effect.

By default there will be a flashing beacon created using a canvas circles. If instead you want to use a custom animation beacon, you will be able to extend the functionality yourself as follows:

  • In js/addOns.js, at the bottom of the CIQ.Animation function, there is an stx.append("draw") function.
  • Make a copy of this function so you can override the behavior.
  • In there you will see it determine var x and y, which are the coordinates for the center of the beacon.
  • At the bottom of this append function, where we draw the beacon by using the Canvas arc() function to draw a circle and then fill() to make the circle solid.
  • You can replace this circle and fill instructions with an image using CanvasRenderingContext2D.drawImage() .

Animation Example

You can disable animation after each different chart type is activated by calling:


Keep in mind that changing to a different chart type, may once again enable animation. You can override this by adding an event listener on layout changes.

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