Search code examples
javascriptwebassemblyscichartscichart.js

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

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: enter image description here

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

Solution

  • 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