Adding points or bars while scrolling leads to timescale jumps

devoln commented 7 months ago

Lightweight Charts™ Version: 4.1.3

Steps/code to reproduce:

Create a HTML file with the following content.
Open it
Scroll the chart to the left
Continue scrolling by moving mouse slowly in any direction with left mouse button pressed
Watch jumps happening each 3 seconds

<html>
<body>
<script src="https://unpkg.com/lightweight-charts@4.1.3/dist/lightweight-charts.standalone.production.js"></script>
  <div id="container"></div>
  <script>
    const chart = LightweightCharts.createChart(document.getElementById('container'), {width: 800, height: 400});

    const series = chart.addLineSeries();
    let nextVal = {time: Date.parse('2023-01-01') / 1000, value: 0};

    const addVal = () => {
        nextVal.time += 86400;
        nextVal.value = Math.random();
        series.update(nextVal);
    };

    for(let i = 0; i < 500; i++) addVal();
    setInterval(() => {for(let i = 0; i < 50; i++) addVal()}, 3000)
  </script>
</body>
</html>

Actual behavior:

The timescale jumps to the right by 50 days every 3 seconds while scrolling is in process.

Expected behavior:

No jumps, just scrolling proportional to mouse movements.

Also can be reproduced in TradingView. Select the smallest possible timeframe (1m for free plans), scale the chart to make bars bigger in order to make jumps more noticeable. Then start to scroll slowly. When new candle appears, the timescale will jump to the right by one bar.

Let me know if there is a way to work around this issue. I couldn't find any. I want to append new candles while user is scrolling to the right and more candles become visible. But this makes the chart to jump by the number of added candles. Option shiftVisibleRangeOnNewBar has no effect because it isn't applicable to this case. Both setData and update have the same behaviour. By the way, adding new candles into the beginning (candleArray.unshift + setData) doesn't have any issue, no jumps happen in that case.

SlicedSilver commented 7 months ago

Thank you for reporting this. This is something that could be improved and fixed on the library.

drgarlic commented 2 months ago

My solution to this is to create a line series with a lot of whitespace data and the very last value to be NaN, which works great and provides a smooth scrolling UX but only when you don't need too much whitespace. At some point it crashes mobile browsers (I need 1M whitespaces on some charts)

tradingview / lightweight-charts

Adding points or bars while scrolling leads to timescale jumps #1521