Bug: `fix*Edge` does not render properly on first render

[nichita-pasecinic]

Lightweight Charts™ Version: 4.0.1

Steps/code to reproduce:

Looks like the fixLeftEdge and fixRightEdge are broking the first render

Actual behavior:

On first render the chart is empty, with data in it actually, but is just not visible. If user somehow interacts with the chart (click on it, drags, zooms, resizes the browser tab) the chart becomes visible

First render:

Expected behavior:

Be visible on first render too

(After user drags on the chart)

CodeSandbox/JSFiddle/etc link:

https://stackblitz.com/edit/react-ts-oee6az?file=package.json,App.tsx,index.tsx

[SlicedSilver]

I believe that this is an issue with the example you've provided (and how it is integrated with React). If you call setData after you create the areaSeries then appears to load correctly.

const chart = createChart(chartWrapperRef.current, chartOptions);
const areaSeries = chart.addAreaSeries(seriesOptions);
// SET DATA HERE
areaSeries.setData(chartTestData);

Modified Example: https://stackblitz.com/edit/react-ts-yabx2m?file=App.tsx

We have some React examples on our tutorials page: https://tradingview.github.io/lightweight-charts/tutorials/react/simple

If you are deliberately choosing not to use setData when the area series is created and you still believe there is a bug then could you create an example without using React so we can rule out anything related to React.

[nichita-pasecinic]

Is there any React support or help I can get ? (The react example does not help much in such cases)

[nichita-pasecinic]

I explicitly need to setData apart from creating the chart

[SlicedSilver]

I've created a reproduction without the React part: https://codesandbox.io/p/sandbox/lightweight-charts-ts-starter-forked-5g5ene

So the issue only occurs when both fixLeftEdge and fixRightEdge are true, and you are adding data to a chart which doesn't have any data yet.

As a work-around, you could call chart.timeScale().fitContent() when you set the data:

setTimeout(() => {
  areaSeries.setData(chartTestData);
  chart.timeScale().fitContent();
}, 1000);

I'm marking this as a bug and we will investigate if there is a fix which should be implemented in the timescale logic for this specific set of circumstances.

[nichita-pasecinic]

@SlicedSilver thanks and indeed I noticed too, that by calling chart.timeScale().fitContent(); it triggers a re-render and the chart series are visible again.

P.S: In react I'll make sure the fitContent is called only after first setData (using a ref)

Hopefully this gets fixed soon, thanks.

[nichita-pasecinic]

Also, fitContent might be unnecessary and not wanted, it is possible to use timeScale().scrollToRealTime();

It will trigger an additional re-render

[nichita-pasecinic]

Hi @SlicedSilver, sorry to bother, but will it be fixed any soon ? It is just impossible to simply have fixLeftEdge and fixRightEdge both on true. Above workarounds with timescale()... produces some side-effects that are un-desirable, and I couldn't find a method to just force re-render the chart (this fixes the with empty chart) that will not have any effect on axes or chart itself (I need just a force re-render)

[SlicedSilver]

It seems that applying options to the timeScale again will trigger a re-render which fixes this problem and doesn't use the fitContent method.

chart.timeScale().applyOptions({});

Even though the options object is empty, it will still refresh the chart. If you have previously applied fixLeftEdge and fixRightEdge then those options will remain true and the chart will render as expected.