Questions

Hi Vita!

As you’ve already found the JavaScript Realtime Stock Charts example I will use this as a reference.

In this example we have a block of code where we update the DataSeries which the candlestick chart is bound to.

const fillPriceDataSeries = (requestUpdate: boolean, initialDataset: boolean) => {
    const generatedData = genPricesData(requestUpdate);
    const { xValue, openValue, highValue, lowValue, closeValue, volume } = generatedData;
    if (requestUpdate) {
        const length = priceDataSeries.count();
        priceDataSeries.update(length - 1, openValue, highValue, lowValue, closeValue);
        volumeDataSeries.update(length - 1, volume);
        const nativeCloseValues = priceDataSeries.getNativeCloseValues();
        movingAverage20DataSeries.update(length - 1, calcAverageForDoubleVector(nativeCloseValues, MOVING_AVR_20));
        movingAverage50DataSeries.update(length - 1, calcAverageForDoubleVector(nativeCloseValues, MOVING_AVR_50));
    } else {
        priceDataSeries.append(xValue, openValue, highValue, lowValue, closeValue);
        const volume2 = initialDataset ? volume * 2 : volume;
        volumeDataSeries.append(xValue, volume2);
        const nativeCloseValues = priceDataSeries.getNativeCloseValues();
        movingAverage20DataSeries.append(length - 1, calcAverageForDoubleVector(nativeCloseValues, MOVING_AVR_20));
        movingAverage50DataSeries.append(length - 1, calcAverageForDoubleVector(nativeCloseValues, MOVING_AVR_50));
    }
};

Notice that what we do is decide if this is a new price bar (based on index, or date) and then call DataSeries.append() for new data, or DataSeries.update() to update existing data.

– Read more about the SciChart.js DataSeries API here
– Read more about Realtime JavaScript Charts in our tutorial here.

The update() function on DataSeries causes an immediate redraw, there is no way to animate an update or to animate to a new value. However, you can add this in using the Animator functions in the scichart library.

Try this code. To update a DataSeries animated, substitute this line in the example:

priceDataSeries.update(length - 1, openValue, highValue, lowValue, closeValue);

for this

// import {DoubleAnimator} from "scichart/Core/Animations/DoubleAnimator";
// import { easing } from "scichart/Core/Animations/EasingFunctions";
const animateUpdate= (dataSeries: OhlcDataSeries, open: number, high: number, low: number, close: number) => {
    const length = priceDataSeries.count();
    const currentCloseValue = dataSeries.getNativeCloseValues().get(dataSeries.count() - 1);

    DoubleAnimator.animate(currentCloseValue, close, 500, (animatedCloseValue) => {
        priceDataSeries.update(length - 1, open, high, low, animatedCloseValue);
    }, () => {},
        easing.outExpo)
};
animateUpdate(priceDataSeries, openValue, highValue, lowValue, closeValue);

I’ve tried this out in the JavaScript Realtime Candlestick Charts example with a slightly slower setTimeout of 1000ms for the simulated updates and this is the result.

Animated candlesticks!

Let me know if this helps,

Best regards,
Andrew

Hi Albert and Vita

We have more info on animating an Xy point in a SciChart.js JavaScript Chart as well as a code sample here.

Let us know if this helps answer the question

Best regards,
Andrew