Unexpected Double Rendering and Chart Disappearance in Multi-Pane SciChart with Next.js

Hello,
If I understood correctly, this issue occurs both in developement and production mode (with StrictMode disabled), right?
I think the following will help: set “loader: false” via creation options for each of the charts

SciChartSurface.create(root, {
  // ...
  loader: false
})

Hello, we need to understand what your setup looks like.
And what is the exact issue: is your chart being initialized twice or are there just redundant loaders?

To check whether a chart is being initialized twice, you can just add some logging to the init function you pass into SciChartReact (or enable SciChart internal logs via Logger.enableDebug = true before chart creation).
Otherwise, if the issue is just in some redundant loaders, compare it to the number of charts you create.
And let us know whether you are using the SciChartNestedOverview component.
So please provide more info if nothing of the following helps.

We have updated our demo website recently and there might be some changes to the demos.
Check out the example code here again.

Now it uses a custom component (ChartGroupLoader) to show a single spinner over multiple charts.

FYI, to set a loader on the SciChartReact component you pass the “fallback” property.

Thus, to sum up:
– check whether a specific chart is being initialized multiple times
– set “loader: false” when creating a chart (including the Overview component since it is technically a separate chart). This disables the native HTML loader of the core lib
– try changing the “fallback” property on SciChartReact. It specifies a React component used as a loader. (default – )
– check out as an example of adding a single loader over multiple charts.

Then, let us know what is your progress with that.

First of all, thanks for the reply and your attention to this issue.

You can refer to the gist that include all the code related to the chart.

https://gist.github.com/posgnu/aaa041b43c967a254cd4b112b2602338

1. To check if the chart is initialized twice

I have put logging on two parts

      <SciChartGroup onInit={() => {
    console.log("Initializing SciChartGroup");
    chartsInitializationAPI.syncAxes();
    updateChartData();
  }}>

and

  useEffect(() => {
if (chartsInitializationAPI === null) {
  if (!isKpLoading && !isFxLoading && !isUsdtLoading && !isBtcLoading) {
    console.log("Initializing SciChartGroup");
    setChartsInitializationAPI(
      getChartsInitializationAPI(setCurrentStartTime),
    );
  }

but the log was only printed once.

I have also added logging in front of each SciChartSurface.create call of every children chart like below

    console.log("Drawing Price Chart");
const { wasmContext, sciChartSurface } = await SciChartSurface.create(
  rootElement,
  {
    disableAspect: true,
    theme: chartTheme.SciChartJsTheme,
  },
);

It is still printed once.

1. I am not using SciChartNestedOverview

2. I am not adding or customizing any loaders. They are all default loaders.

Thanks again for your support.

New update.

it is working well if I remove this from each chart creation.

//        disableAspect: true,

However, it breaks the ratio of the height of each chart I set here

          <SciChartReact
        initChart={chartsInitializationAPI.drawOhlcChart}
        style={{ flexBasis: 200, flexGrow: 1, flexShrink: 1 }}
      />

It is working nicely after I replace flexbasis with height

return (
<div className="flex flex-col gap-1 w-full items-center">
  <ControlSection
    timeFrame={timeFrame}
    setTimeFrame={setTimeFrame}
    zoomToFullRange={chartsInitializationAPI.zoomToFullRange}
  />

  <SciChartGroup onInit={() => {
    chartsInitializationAPI.syncAxes();
    updateChartData();
  }}>
    <div
      className="w-full"
      style={{ display: "flex", flexDirection: "column", height: "100%" }}
    >
      {/* Price Chart */}
      <SciChartReact<SciChartSurface>
        initChart={chartsInitializationAPI.drawPriceChart}
        style={{ height: 400, flexGrow: 1, flexShrink: 1 }}
      />
      {/* OHLC Chart */}
      <SciChartReact
        initChart={chartsInitializationAPI.drawOhlcChart}
        style={{ height: 200, flexGrow: 1, flexShrink: 1 }}
      />
      {/* BTC OHLC Chart */}
      <SciChartReact
        initChart={chartsInitializationAPI.drawBtcOhlcChart}
        style={{ height: 200, flexGrow: 1, flexShrink: 1 }}
      />
      {/* RSI Chart */}
      <SciChartReact
        initChart={chartsInitializationAPI.drawRsiChart}
        style={{ height: 100, flexGrow: 1, flexShrink: 1 }}
      />
      <SciChartReact
        initChart={chartsInitializationAPI.drawZScoreChart}
        style={{ height: 100, flexGrow: 1, flexShrink: 1 }}
      />
    </div>
  </SciChartGroup>
</div>

);

Would it be possible to get some explanation about this error so that I do not repeat in the future?