Markers doesn't show and disappears on Chrome/Chromium browsers.

[Dwyte]

Lightweight Charts Version: 3.1.2

Steps/code to reproduce:
Set Markers on a chart using chrome/chromium browsers.

Actual behavior:
Some of markers are not showing on chrome/chromium, and some disappears depending on the zoom.

Expected behavior:
All markers should show normally like on Firefox.

Screenshots:

On Firefox:

On Chrome:

On Chrome (Zoomed in a bit):

• Mango and Dalandan markers are missing.
• Fruit suddenly disappeared on zoom.
• Sometimes if there are 2 markers on the same candle instead of behaving like on firefox (one marker below, then the other one above it) it will plot the markers on the same y position so texts become unreadable. (Didn't got a screenshot on this one, but I swear I've seen one)

Browsers used:
Firefox, Brave Browser and Chrome

[timocov]

Do you a jsfiddle-repro for that? Meanwhile, please check that all your markers are sorted in asc order by time.

[Dwyte]

@timocov yep, they are sorted in ascending order by time. It's all good on firefox.

[timocov]

Can you try to do the following:

1. Build your app with development build (every lightweight-charts version has development version in it https://unpkg.com/browse/lightweight-charts@3.1.5/dist/) and check whether there is any error or warning?
2. What format of the date you're using for shapes?
3. Provide jsfiddle example of the repro? We have a bunch of graphics tests based on chromium (we use puppeteer) and didn't see similar issues there yet.

[Dwyte]

Okie, to answer #2 the format I use is just the epoch timestamp of the candle for the shapes.

[canselcik]

I'm having the same issue. Some markers disappear when zoomed in or panned to a certain area, despite still being in range and should/would be drawn.

Edit: Upon further investigation, it seems to be related to sorting for sure.

    // This works as expected
    candleSeriesRef.current.setMarkers(
      [...byTimestampAndType.sells, ...byTimestampAndType.buys].sort((a, b) => a.time - b.time),
    );
    // This is broken as described
    candleSeriesRef.current.setMarkers(
      [...byTimestampAndType.sells, ...byTimestampAndType.buys].sort((a, b) => b.time - a.time),
    );
    // This is broken as described
    candleSeriesRef.current.setMarkers(
      [...byTimestampAndType.sells, ...byTimestampAndType.buys],
    );

So they simply should be sorted.

[kovalu]

Yes, I ran into the same issue (both Chrome and Firefox) and sorting the array helped.
Then I noticed that even the documention mentions that it needs to be sorted...

An array must be sorted ascending by time.

https://github.com/tradingview/lightweight-charts/blob/master/docs/series-basics.md#setmarkers

It could be a feature request for the library to sort it automatically internally, so it's not a user's responsibility.

[timocov]

It could be a feature request for the library to sort it automatically internally, so it's not a user's responsibility.

@kovalu Sorting array might affect performance, and if you pass a huge sorted array, it might take some time for no reason. A user must sort it before pass it to the library, because it's a requirement of the library (which is declared in the docs as well). We'll warn about that in #315 in debug mode only, so it won't affect your production build, but you have no difference in behaviour between debug and production builds.

[timocov]

It seems that all issues are related to order of the data, so I'm going to close the issue. Feel free to ping me or re-create the issue (or re-open this one) if you'll find something else.