How to work/add support with different time zones

[kamilkazmierczak]

Lightweight Charts Version: 3.3.0

Steps/code to reproduce:
Visit https://jsfiddle.net/b5v8L9et/

Actual behavior:
Day TickMark is displayed at 2:00 instead of 0:00

Expected behavior:
Allow to configure chart to display tickmark in position valid for specific locale - at 0:00 for day, month, year

Screenshots:

CodeSandbox/JSFiddle/etc link:
https://jsfiddle.net/b5v8L9et/

I provided custom tickMarkFormatter (and timeFormatter for easier readability) but there is no way to customize where specific tickMark should be displayed

[timocov]

As workaround you can try to "fix" the dates you provide in the data by adding timezone offset.

[maxbethke]

I had the same problem. This is my workaround for it, incase anyone is feeling lazy:

chart.applyOptions({
    timeScale: {
        tickMarkFormatter: (time, tickMarkType) => {
            time = this.getTimezoneCorrectedTime(time)
            [...]
        }
    }
})
   

getTimezoneCorrectedTime(utcTime, returnAsUnixTimestamp = false) {
    if(utcTime instanceof Date) {
        utcTime = utcTime.getTime()/1000
    }

    const timezoneOffsetMinutes = new Date().getTimezoneOffset()
    const correctedTime = utcTime+(timezoneOffsetMinutes*60)

    if(returnAsUnixTimestamp) return correctedTime

    return new Date(correctedTime*1000)
}

[timocov]

Please see https://github.com/tradingview/lightweight-charts/blob/7104e9a4fb399f18db7a2868a91b3246014c4324/docs/time-zones.md