Value is null Error when trying to sync multiple charts using TimeScale().setVisibleRange() in React

[a1235456]

Lightweight Charts Version:

Steps/code to reproduce:

subscribeVisibleTimeRangeChange on the main chart setVisibleRange to other charts

Actual behavior:

Value is null Error

Expected behavior:

Expect to sync different chart by scrolling

Screenshots:

---

Currently, I have made a mainChart for line graph/ candlestick graph, a RSI chart and a MACD chart. They all display data well without error. However, when I try to synchronize them whiling scrolling using subscribeVisibleTimeRangeChange() and setVisibleRange(), "value is null" error occurred after setVisibleRange(). And the subscribeVisibleTimeRangeChange function is working fine since it does return the object of time range to me.

I have searched for different solutions. Some said duplicate timestamp or null data would cause the error. And I have checked the data is fine.

Some said setting visible range before data is loaded would cause the error and I should have prevented that by setting a "isSet" state to ensure the code runs after the data is set.

Thank you for helping me.

[SlicedSilver]

I would recommend that you rather try use subscribeVisibleLogicalRangeChange and the corresponding setVisibleLogicalRange (docs link) since they will work better for syncing the scroll position across multiple charts. visibleTimeRange tells you the date range of the visible data points so if you zoom out until all the data points are visible then scrolling left and right won't cause the time range values to change so it will be difficult to keep all the different plots lined up correctly.

If all the plots have the same number of points and the same time values then 'visibleLogicalRange' will achieve your desired syncing of the charts. If the charts have different start, end, or number of points then you will need to do a few more steps to determine the correct logical indices before using setVisibleLogicalRange.

[a1235456]

Thank you so much. I will check for the Logical Range method now.

[obust]

If all the plots have the same number of points and the same time values then 'visibleLogicalRange' will achieve your desired syncing of the charts. If the charts have different start, end, or number of points then you will need to do a few more steps to determine the correct logical indices before using setVisibleLogicalRange.

@SlicedSilver I have this situation where chart1 (e.g. OHLCV) has more points than chart2 (e.g. RSI 14 won't have a value for the first 14 samples). What are the "few more steps to determine the correct logical indices" in this situation ? I would really appreciate an answer to that since I have not found an example of this case.

[xxprzemoxx]

Yes....

[SlicedSilver]

The simplest solution to your specific case would be to use whitespace data on the RSI series for the first 14 samples so that both series have the same number of points and the same time values for each point.

Whitespace data is a data point without any values, and only a time value. Example: https://tradingview.github.io/lightweight-charts/tutorials/demos/whitespace

This moving average example uses whitespace data at the start of the moving average series: https://tradingview.github.io/lightweight-charts/tutorials/demos/moving-average

[obust]

Oh okay. That was unexpectedly easy

I had encountered Uncaught (in promise) Error: Assertion failed: Line series item data value must be a number, got=object, value=null and assumed i would remove the sample altogether.

Maybe mentioning the "whitespace data" in the error could be useful ?