Issue when scrolling charts that have their crosshair synced using setCrosshairPosition

[jamesbrobb]

Lightweight Charts™ Version:

4.1

Steps/code to reproduce:

1. Go to the tutorial page for setCrosshairPosition

2. Mouse over chart and move around - the crosshairs will sync on both charts

3. Scroll the chart left or right

Actual behavior:

As you scroll the chart the crosshair vertical position moves away from the mouse position until it reaches the visual limit of the chart, on either the left or right side depending on the direction of scroll

Expected behavior:

The vertical crosshair to stay under the current mouse position

Screenshots:

Screen.Recording.2024-05-30.at.12.05.26.mov

CodeSandbox/JSFiddle/etc link:

[jamesbrobb]

I've done some further investigation into this issue. A partial solution, although not a fix, is to prevent setCrosshairPosition being called when event.sourceEvent == undefined. This occurs whilst scrolling the chart left to right.

chart.subscribeCrosshairMove((event: MouseEventParams<Time>) => {
    
    if(!event.sourceEvent) {
        return;
    }
    // ...code to call `setCrosshairPosition` on other charts to sync crosshairs
});

I've increased the brightness of the crosshair vertical line and made it solid to demonstrate the result, so the misalignment in the two vertical crosshair lines is really obvious whilst scrolling. It's still not great, but at least it's nearer to the mouse than before.

Screen.Recording.2024-05-30.at.15.06.44.mov

---

It's confusing why the crosshair follows the mouse accurately when scrolling on a single chart. But as soon as you attempt to set the crosshair position on another chart (through the setCrosshairPostion method) it breaks the crosshair position on both charts.

I'd expect the crosshair of the chart the mouse is currently over to be correct and the crosshair of the 'synced' chart to be wrong, not both of them to be wrong.

[jamesbrobb]

Unfortunately the 'fix' i mentioned (event.sourceEvent == undefined) causes another issue. As it involves ignoring any changes once event.sourceEvent becomes undefined - which occurs once the user begins to scroll the chart horizontally - if you scroll off the end of the chart and then back on, the crosshair is (understandably) no longer synced.

Screen.Recording.2024-07-01.at.20.54.08.mov

[drgarlic]

@jamesbrobb to fix that you could add some whitespace data like this:

#1605 (comment)

I've had the whitespace for a while now in my app which is why I didn't realize this use case was an issue.

[jamesbrobb]

@drgarlic interesting, thanks a lot, i'll take a look at that