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:

    SciChartSurface.create() vs. createSingle()

    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.

    Blog on Drag & Drop Dashboards

    Your example has 40 charts, 80 axis, 800 labels, 1000s of gridlines, 220k points per chart, 8.8m points all updating in realtime.

    We recently discovered & blogged about improving this scenario by simply reducing the axis label frequency, using Native Text (WebGL text rendering) and label caching and various other optimisations. You can read the blog post here: Creating a React drag & drop dashboard with 100 charts at 60 FPS. This contains a code sample which you can get from our Github.

    React Drag & Drop Dashboard Chart performance demo

    There are some further observations in the forum post on what can improve this further

    SubCharts API

    We have a demo here of 100 charts in a dashboard using SubCharts which can update at 60 FPS. However this would sacrifice drag & drop re-ordering.

    We've also just published a demo of creating draggable child windows using SubCharts, however note that the HTML elements are rendering in one layer and the charts in another, so this may not be suitable for your use-case.

    Draggable Subcharts demo scichart.js

    Visual artefacts

    Visual rendering artefacts are also covered in the forum post where you may have set the isSorted flag incorrectly and should check that.