I've got a lightweight chart setup that looks like this. I want to add some kind of configuration so that the chart can show me the local time as opposed to the universal time being passed by a Unix timestamp, which is a couple hours offset from mine for example. Another possibility is to modify the Unix timestamps.
var chart = LightweightCharts.createChart(document.getElementById("charts"), {
width: 1060,
height: 537,
layout: {
backgroundColor: "#161616",
textColor: "rgba(255, 255, 255, 0.9)",
fontSize: 15,
fontFamily: "Ubuntu",
},
grid: {
vertLines: {
color: "#424242",
width: 0.3,
},
horzLines: {
color: "#424242",
width: 0.3,
},
},
crosshair: {
mode: LightweightCharts.CrosshairMode.Normal,
},
priceScale: {
borderColor: "rgba(197, 203, 206, 0.8)",
size: 5,
},
timeScale: {
borderColor: "rgba(197, 203, 206, 0.8)",
timeVisible: true,
secondsVisible: false,
rightBarStaysOnScroll: true,
},
});
I've posted the similar question here, but didn't post an answer so far.
I see 2 approaches which might help you to solve this issue:
tickMarkFormatter
, dateFormat
and timeFormatter
to format dates properly with desired TZ offset.I think that the first way (with adding offset) is preferred because it'll also affect tick marks generation and their weight, so your timescale will look much better without issues (e.g. you can see 23:00
for time instead of 30
for day because you add an offset 60 min and it shifts timescale a bit).
EDIT (03.11.2021): Please this doc to get more information related to how to support time zones.