Pre loader

Tag: React

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

0 votes

I am trying to add sci chart in nextjs app and its failing with a message “Aborted(both async and sync fetching of the wasm failed)”.
I have updated next config – webpack with :
const destWasmFolder = “static/chunks/pages”;
config.plugins.push(new CopyPlugin({
patterns: [
{ from: “node_modules/scichart/_wasm/scichart2d.wasm”, to: destWasmFolder },
And installed the package copy-files-from-to and created a file “copy-files-from-to.json in the root directory with content:
“copyFilesSettings”: {
“whenFileExists”: “overwrite”
“copyFiles”: [
“from”: “./node_modules/scichart/_wasm/”,
“to”: “./public/”

And updated package.json script with “”dev”: “cross-env NODE_OPTIONS=\”-r next-logger\” copy-files-from-to && next dev”

1 vote

I have a React application showing a real time updated chart which works well when receives data from event-based WebSocket. Now I need to modify the app with a new data source. I have an aysnc function to get a batch of data in an interval.

kinesisReadInterval.current = setInterval(async () => {
        const recordsResponse = await kinesisRef.current.getRecords({ ShardIterator: shardIterator }).promise();
        recordsResponse.Records.forEach(record => {
            try {
                const dataObj = JSON.parse(record.Data.toString('utf-8'));
            } catch (jsonError) {

        shardIterator = recordsResponse.NextShardIterator;

        if (!shardIterator || !kinesisConected.current) {
                clearInterval(intervalId); // Stop interval if conditions are not met
    }, 1000);

The recordsResponse.Records contains a batch of records and I want to update the chart based on these records one by one. From my logs, I can see that the binaryDataHandler() which will call appendRange() ran successfully for each record. However, the chart only redraws for the last record of the recordsResponse.Records. I have tried to store the recordsResponse.Records in a state variable and loop to update the chart later, but still got the same result. I am not sure whether it’s chart related issue or React rendering issue. Do you have any idea?

  • Quyen Sy asked 4 months ago
  • last active 4 months ago
1 vote

By following this example to create reusable SciChart component in React:

The chart cannot be created when run in dev mode. But it works well under production mode. I think it’s because React renders components twice in strict mode. It seems that SciChart got problems to create chart with the following logic when running the application in dev mode. Is this true? Or I missed anything?

 useEffect(() => {
    const chartInitializationPromise = props.initChart(rootElementId).then((initResult) => {
        sciChartSurfaceRef.current = initResult.sciChartSurface;
        return initResult.sciChartSurface;
    const performCleanup = () => {
        sciChartSurfaceRef.current = undefined;

    return () => {
        // check if chart is already initialized or wait init to finish before deleting it
        sciChartSurfaceRef.current ? performCleanup() : chartInitializationPromise.then(performCleanup);
}, []);
  • Quyen Sy asked 10 months ago
  • last active 5 months ago
Showing 3 results