Smooth data loading without rerender on React

[maxmatyugin]

Hi!
I am using your chart lib for React and trying to implement smooth data loading on scroll & drag like it is done on your web, where additional data is drawn without a rerender

I tried series.update(), but it seems that the method works only for the data that appeared later than already received data.

Also I tried timeScale().setVisibleRange() and timeScale().setVisibleLogicalRange(). The first one requires Time type and the second one is not exactly the same I need.

Do you have anything else how my task could be implemented?

Now it is implemented via onVisibleLogicalRangeChanged(). The data is loaded and then chart.timeScale().fitContent().

I need the component was not re-rendered on scroll or on drag.

Now it looks like this:

export const ChartComponent = (data) => {

  const chartContainerRef: any = useRef()

  useEffect(() => {
    const handleResize = () => {
      chart.applyOptions({ width: chartContainerRef.current.clientWidth })
    }


    const chart = createChart(chartContainerRef.current, {
      // styles
    })

    const newSeries = chart.addAreaSeries({
      lineColor: '#0841B4',
      topColor: 'rgba(34, 140, 220, 0.15)',
      bottomColor: 'rgba(34, 140, 220, 0)',
    })

    const candlestickSeries = chart.addCandlestickSeries({
      upColor: '#26a69a',
      downColor: '#ef5350',
      borderVisible: false,
      wickUpColor: '#26a69a',
      wickDownColor: '#ef5350',
    })

    async function onVisibleLogicalRangeChanged(newVisibleLogicalRange) {
      if (newVisibleLogicalRange !== null && newVisibleLogicalRange.from < -106) {
        // load additional data and append it to existing data
      }
    }

    chart.timeScale().subscribeVisibleLogicalRangeChange(onVisibleLogicalRangeChanged)

    chart.timeScale().fitContent()

    window.addEventListener('resize', handleResize)
    return () => {
      window.removeEventListener('resize', handleResize)

      chart.remove()
      chart.timeScale().unsubscribeVisibleLogicalRangeChange(onVisibleLogicalRangeChanged)
    }
  }, [data])

  return <div ref={chartContainerRef}>{!candles.length && 'Данных нет'}</div>
}

Expectations
Reality