javascriptchartstimestamp-with-timezonelightweight-charts

How to set a custom time zone for Lightweight Charts?


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,
  },
});

Solution

  • 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:

    1. You can modify source time of the bar by adding TZ offset to the time (which I think is preferred way - see below)
    2. You can override 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.