SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components

1 vote

I am using SciChart with Next.js to create a real-time updated line chart. It works fine if there is 1 trace running with 130k datapoints. But when there are 4 traces (each with 130k datapoints) running in the chart, there is performance issue. After running for a while, this error is showing in the browser console:

“RangeError: Failed to execute ‘texImage2D’ on ‘WebGL2RenderingContext’: The ArrayBuffer/ArrayBufferView size exceeds the supported range.”

I tried to optimize the chart by following this page, but it doesn’t help on the lag issue.

Here are my codes for updating the chart data:

if (SciChartSurface.renderableSeries.get(trace_num)) {
    SciChartSurface.renderableSeries.get(trace_num).dataSeries = new XyDataSeries(WasmContext, { xValues: dataX, yValues: dataY });
} else {
    const lineSeries = new FastLineRenderableSeries(WasmContext);
    lineSeries.strokeThickness = 1;
    lineSeries.stroke = tracesInfoRef[trace_num].color;
    lineSeries.dataSeries = new XyDataSeries(WasmContext, { xValues: dataX, yValues: dataY, dataIsSortedInX: true, dataEvenlySpacedInX: true, containsNaN: false });

Can SciChart perform well with multiple traces which total datapoints larger than 500k? How can I fix the texImage2D error ?

  • Kelly Chan asked 2 months ago
  • last active 1 month ago
1 vote

I tried to use the trial version of SciChart with Next.js. But I got “SciChartSurface.setRuntimeLicenseKey is not a function” error. I don’t know what’s wrong, could you provide guideline for using SciChart with Next.js?

These are the codes in my next.config.js:

const CopyPlugin = require("copy-webpack-plugin");

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  webpack: ( config, { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack } ) => {
            new CopyPlugin({
                patterns: [
                    { from: "node_modules/scichart/_wasm/", to: "" },
                    { from: "node_modules/scichart/_wasm/scichart2d.wasm", to: "" }
    return config;

module.exports = nextConfig

And I have imported these files in pages/index.js

import {SciChartSurface} from "scichart/Charting/Visuals/SciChartSurface";
import {NumericAxis} from "scichart/Charting/Visuals/Axis/NumericAxis";
  • Kelly Chan asked 2 months ago
  • last active 1 month ago
Showing 2 results
This template supports the sidebar's widgets. Add one or use Full Width layout.