ReactJS Sweep Line Demo: Issue with Multiple Surfaces Not Updating Simultaneously

Question

I need to make a demo of a sweep line with multiple surfaces with reactjs, but The problem is that when I choose to show more than 1 surface it only plays on the data on the latest created surface and stops drawing data on the old surfaces.

you can see the example here with the code: https://28zf6p.csb.app/

this is a GIF for the problem:

note: the reason I need multiple surfaces is that I want to have the charts draggable with sortableJS to follow the design I got.

Answer 1

I did not dig deep, it seems that there is an error in the functions that generate graphs and the link to the div is remembered.

However, if you add the id attribute to the div, it starts working as it should. Perhaps the library itself, under the hood, uses the id to access the DOM element.

in App.js

for (let i = 0; i < value; i++) {
  sciCharts.push(<SciChart key={i} id={i} />);
}

in SciChart.jsx

const SciChart = ({ id }) => {
...
return (
  <div id={id} ref={ref} style={{ height: "20%", width: "20%" }}>
    SciChart
  </div>
);
}

test here https://codesandbox.io

Answer 2

You can use an open-source official React wrapper for scichart.
It seems to resolve the issue.
Check out the Live Example

// SciChart.jsx

import { useRef } from "react";
import { SciChartReact } from "scichart-react";
import { dataForSciChart, drawData, initScichart } from "./initScichart";

const SciChart = () => {
  const intervalTimer = useRef();
  return (
    <SciChartReact
      style={{ height: "20%", width: "20%" }}
      fallback={<>Loading</>}
      initChart={initScichart}
      onInit={({ xyDataSeries }) => {
        intervalTimer.current = drawData(xyDataSeries, dataForSciChart);
      }}
      onDelete={() => {
        clearInterval(intervalTimer.current);
      }}
    />
  );
};