All of markers disappear simultaniously when one marker be out of view

[KiYugadgeter]

Screencast.From.2025-11-08.16-56-54.webm

Lightweight Charts™ Version: 5.0.9

Steps/code to reproduce:

import * as tv from "lightweight-charts"
import { parse } from './node_modules/csv-parse/dist/esm/sync.js'
import *  as datefns from "./node_modules/date-fns/index.js"


class MarkerCreator {
    candles: tv.CandlestickData[] = [];
    calc_candles: tv.CandlestickData[] = [];
    starthour: number
    startmin: number
    endhour: number
    endmin: number
    diff: number = -1;
    lowerprice!: number
    isfinished: boolean = false;
    upperprice!: number
    issamplingtime: boolean = false;

    constructor(starthour: number, startmin: number, endhour: number, endmin: number) {
        this.starthour = starthour
        this.startmin = startmin
        this.endhour = endhour
        this.endmin = endmin
    }

    mark(c: tv.CandlestickData): tv.SeriesMarker<tv.Time>[] | undefined {
        this.candles.push(c);
        const d = new Date(c.time as number * 1000);
        const start = datefns.setHours(datefns.setMinutes(d, this.startmin), this.starthour);
        const end = datefns.setHours(datefns.setMinutes(d, this.endmin), this.endhour);
        if ((datefns.isAfter(d, start) && datefns.isBefore(d, end)) || datefns.isEqual(d, start) || datefns.isEqual(d, end)) {
            this.issamplingtime = true
            this.calc_candles.push(c)
        }
        if (datefns.isAfter(d, end) && !this.isfinished && this.issamplingtime) {
            this.issamplingtime = false
            let highesttime!: tv.UTCTimestamp;
            let lowesttime!: tv.UTCTimestamp;
            let highest = -1
            let lowest = 9999999999
            for (let v of this.calc_candles) {
                if (v.high > highest) {
                    highest = v.high
                    highesttime = v.time as tv.UTCTimestamp
                }
                if (v.low < lowest) {
                    lowest = v.low
                    lowesttime = v.time as tv.UTCTimestamp
                }
            }
            this.lowerprice = lowest
            this.upperprice = highest
            this.isfinished = true
            return [
                {
                    time: highesttime,
                    price: this.upperprice,
                    shape: "circle",
                    color: "#4b0082",
                    text: "Upper",
                    position: "atPriceTop",
                    size: 2
                },
                {
                    time: lowesttime,
                    price: this.lowerprice,
                    shape: "circle",
                    color: "#4b0082",
                    text: "Lower",
                    position: "atPriceBottom",
                    size: 2
                },

            ]
        }
        if (d.getHours() == 6 && d.getMinutes() == 0) {
            this.isfinished = false
            this.calc_candles = []
        }
    }
}

Actual behavior:

All of marker on chart disappear when one marker be out of view.

Expected behavior:

Rest of Markers should keep appear even when one marker go to be out of view.

It happens not only on Chrome but also Firefox.

[SlicedSilver]

Could you try modify this code example to reproduce the issue that you are seeing?

• https://stackblitz.com/edit/lwc-2005-bkgbjqst?file=src%2Fmain.ts

[KiYugadgeter]

I think it happens when a lot of candles exist on chart.
In my case there are about 259,000 candles that 1min candle of this year and 430 marks.

[SlicedSilver]

• https://stackblitz.com/edit/lwc-2005-bkgbjqst-7zrshqtc?file=src%2Fmain.ts

Here is an updated example. I can get some strange behaviour by having more data and markers like you suggested. For me the problems became visible at around 16 markers.

[SlicedSilver]

I think I’ve found a reliable way to reproduce this. If the series marker data (the array passed to createSeriesMarkers in the constructor or via setMarkers on the instance) isn’t sorted in ascending time order, the markers can behave like this.

Just like the series data itself, markers must be provided in ascending time. Sorting the markers array by time before passing it to setMarkers should resolve the issue.

[KiYugadgeter]

Now I can confirm your solution work to me.
thank you.

[KiYugadgeter]

Is this behavior going to fix?

[SlicedSilver]

We won't change the behaviour since having the markers in ascending order allows for some performance improvements. We can improve the documentation to make this requirement more clear.