Search code examples
javascriptwebassemblyscichartscichart.js

ReactJS Sweep Line: Optimizing SciChartJS Performance, Reusing wasmContext for Multiple Chart Rendering

I have a performance problem with scichartjs, when initializing about 40 charts/surfaces the rendering state drops to 5-10 frames per second.

I think it might be related to the fact that I run the create function each time and not reusing the wasmContext maybe? but I am not sure how to reuse the wasmContext or what is the best performance for this kind of type

demo : https://9669tv.csb.app/

enter image description here (sorry for the low quality of the Giff due to 2 MB max size of upload)

this is my init function


export const initScichart = async (divElementId) => {
  SciChartSurface.UseCommunityLicense();
  //console.log(divElementId.id);
  const { sciChartSurface, wasmContext } = await SciChartSurface.create(
    divElementId,
    {
      theme: new SciChartJsNavyTheme(),
    }
  );

  sciChartSurface.xAxes.add(
    new NumericAxis(wasmContext, {
      visibleRange: new NumberRange(0, 5),
    })
  );
  sciChartSurface.yAxes.add(
    new NumericAxis(wasmContext, {
      autoRange: EAutoRange.Always,
    })
  );

  const xyDataSeries = new XyDataSeries(wasmContext, {
    fifoCapacity: 220_000, // set fifoCapacity. Requires scichart.js v3.2 or later
    fifoSweeping: true,
    fifoSweepingGap: 2_200,
    containsNaN: false,
    isSorted: true,
  });

  sciChartSurface.renderableSeries.add(
    new FastLineRenderableSeries(wasmContext, {
      dataSeries: xyDataSeries,
      strokeThickness: 1,
      stroke: "#50C7E0",
    })
  );

  xyDataSeries.sciChartSurfaceToDelete = sciChartSurface;

  return xyDataSeries;
};

enter image description here

the reason I need the charts on different surfaces is that I need to wrap them in SortableJS (to be able to drag them across the website)

I think something in the configuration is the problem because it the line is sometimes shown really odd

enter image description here

Solution

  • This was also posted and answered here at the SciChart.js Forums

    The TLDR is:

    • Using sciChartSurface.create() does share one wasmContext, one WebGL engine instance and is the lowest memory way to instantiate a chart with SciChart
    • But, this method also sacrifices a little performance. Using WebGL context sharing in the SubCharts API in scichart is the way to get faster drawing speed for many charts scenarios
    • Your example has 40 charts, 80 axis, 800 labels, 1000s of gridlines, 220k points per chart, 8.8m points all updating in realtime. 5-10 FPS is not bad given these circumstances, but the forum post has some suggestions on how to improve this further
    • Visual rendering artefacts are also covered in the forum post where you may have set the isSorted flag incorrectly and should check that.