Series Markers misaligned on new bar

[whis]

Lightweight Charts™ Version: 5.0.9

Steps/code to reproduce:

1. Create a bar series
2. Create series markers on top of bars
3. Create two line series (required for the bug to appear)
4. Set data for bars and line series
5. Set markers
6. Set new data for bars and series (remove the oldest bar a add a new bar)

https://stackblitz.com/edit/lwc-1990-meelm1ef?file=src%2Fmain.ts

Actual behavior:

On each new bar, the markers rubber-band, as if they were delayed by one frame.

Expected behavior:

Markers staying at the proper bar and not shifting.

Screenshots:

20251015-1452-36.8881828.mp4

[SlicedSilver]

In your description you mention:

Update bars and markers

You don't need to set the markers on each data update.

How are you setting the data and markers? Some actual code would be helpful.

Anyway, if you use the update() method to provide new bars of data to the series, and you aren't needlessly resetting the markers then it will work as expected. Here is a demo:
https://stackblitz.com/edit/lwc-1990?file=src%2Fmain.ts

However even if you do set the markers at the same time that you update the data then it continues to look correct:

const markersApi = createSeriesMarkers(series, markers);

setInterval(() => {
    const updateValue = getNextDataPoint();
    series.update(updateValue);
    markersApi.setMarkers(markers);
}, 500);

lwc1990.mov

[whis]

Sorry for the confusion. I am doing series.setData() on each price tick, followed by markersApi.setMarkers() if markers have changed. The reason I am using setData instead of update is that I need to keep only the last N bars on the chart for performance reasons.

[whis]

@SlicedSilver

I’ve identified the exact repro steps and included a demo — please see the updated description. The problem occurs only when there are two or more line series on the chart (in the same pane or a new one) and you shift the bars (remove the first bar and add a new one).

Demo: https://stackblitz.com/edit/lwc-1990-meelm1ef?file=src%2Fmain.ts

[SlicedSilver]

Is it a requirement to remove the oldest bars? The library is designed in such a way that you don't need to to do and it is actually recommended that you don't because you would be incurring an additional amount of CPU work (setData requires a lot more work than an update). So my first suggestion would be to not use setData for updating the series, rather use it once at the start and then use update after that.

My second suggestion is that you could call the setMarkers straight after you use setData and the issue appears to go away.

  series.setData(data);
  highSeries.setData(lowData);
  lowSeries.setData(highData);
  markersApi.setMarkers([
    {
      time: data[data.length - 1].time,
      position: 'aboveBar',
      shape: 'arrowDown',
      text: 'TEST',
    },
  ]);

[whis]

Well, is there a way to efficiently add more than one bar and not forcing the chart to refresh the view / new render cycle?

My implementation is in visual backtesting on very low timeframe which is running at maximum cpu speed, and since whenever I call series.update() it forces the chart to refresh, it becomes huge bottleneck in performance. For this reason, it's way faster to call setData at specific refresh rate asynchronously.

Regardless, thanks for taking time on this issue and suggesting workarounds!

[SlicedSilver]

One setData call will likely use more CPU than multiple update calls (depends on the amount of data already on the chart). I would suggest using a loop and adding each bar one at a time.

const newBarsToAdd = [/* multiple bars here */];
// ...

function executeDebouncedChartUpdate(newBarsToAdd, series) {
    for (const bar of newBarsToAdd) {
        series.update(bar);
    }
}

If you add all the bars via the loop in a single synchronous task then it should be faster than using setData and the chart wouldn't need to recalculate all the indices for the time scale (which would cause the markers to need to adjust).