SciChart.js JavaScript 2D Charts API > 2D Chart Types > Series Animations API
Series Animations API

In SciChart.js you can use the Animations API to animate RenderableSeries. The Animations API allows you to define a number of different transforms you your chart series during the render pass.

Animation Types

There are several Animation Types provided out of the box in SciChart.js. These are:

  • FadeAnimation
  • ScaleAnimation
  • SweepAnimation
  • WaveAnimation

Sweep Animation

Let's see a simple example of using Sweep Animation on chart types in SciChart.js

Sweep Animation
Copy Code
const rendSeries = new FastBandRenderableSeries(wasmContext, {
    dataSeries,
    strokeThickness: 2,
    animation: new SweepAnimation({ duration: 1000 }),
});

 

Fade Animation

Now let's see an example of using Fade Animation on some chart types in SciChart.js

Fade Animation
Copy Code
const rendSeries = new FastBandRenderableSeries(wasmContext, {
    dataSeries,
    strokeThickness: 2,
    animation: new FadeAnimation({ duration: 1000 }),
});

 

Note: The Sweep, Scale and Wave animations also support fade/opacity by setting the Animation.fadeEffect property to true.

Scale Animation

Now let's see an example of the Sweep animation on chart types in SciChart.js.

Scale Animation
Copy Code
const rendSeries = new FastBandRenderableSeries(wasmContext, {
    dataSeries,
    strokeThickness: 2,
    animation: new ScaleAnimation({ duration: 1000, zeroLineY: -1.5 }),
});

 

Wave Animation

Finally let's see an example of the Wave animation on chart types in SciChart.js.

Wave Animation
Copy Code
const rendSeries = new FastBandRenderableSeries(wasmContext, {
    dataSeries,
    strokeThickness: 2,
    animation: new WaveAnimation({ duration: 1000, pointDurationFactor: 0.5, zeroLineY: -1.5 }),
});

 

Future work

In the future we have the option to expose animation functions to allow you to create custom data-point or opacity or colour animations. If this is of interest contact us and tell us your requirements.