How to enable timezone support for time scale?

[timocov]

Related issue #497.

Is it possible to use timezones on the chart? Like on https://www.tradingview.com/chart or https://charting-library.tradingview.com.

Related to https://stackoverflow.com/questions/65785045/how-to-set-a-custom-time-zone-for-lightweight-charts

[timocov]

Please read the doc https://github.com/tradingview/lightweight-charts/blob/7104e9a4fb399f18db7a2868a91b3246014c4324/docs/time-zones.md to get more information related to support time zones.

[garmoshka-mo]

documentation about timezones has a lot of sophistry (a sign that someone is sabotaging a simple task). They could easily add some property like convertToLocalTimezone: true or timezoneOffset: 7200, but it seems like they had an internal dispute and decided not to do anything. ☹️

I hope this will be fixed soon, meanwhile if you don't want to distort original data, use following formatter:

const localTimezoneOffset = new Date().getTimezoneOffset() * 60

....

  timeScale: {
    timeVisible: true,
    tickMarkFormatter: (time, tickMarkType, locale) => {
      return defaultTickMarkFormatter({timestamp: time - localTimezoneOffset},
        tickMarkType, locale)
    },
  },

where defaultTickMarkFormatter is library's default formatter:

function defaultTickMarkFormatter(timePoint, tickMarkType, locale) {
  const formatOptions = {};

  switch (tickMarkType) {
    case 0: //TickMarkType.Year:
      formatOptions.year = 'numeric';
      break;

    case 1: // TickMarkType.Month:
      formatOptions.month = 'short';
      break;

    case 2: //TickMarkType.DayOfMonth:
      formatOptions.day = 'numeric';
      break;

    case 3: //TickMarkType.Time:
      formatOptions.hour12 = false;
      formatOptions.hour = '2-digit';
      formatOptions.minute = '2-digit';
      break;

    case 4: //TickMarkType.TimeWithSeconds:
      formatOptions.hour12 = false;
      formatOptions.hour = '2-digit';
      formatOptions.minute = '2-digit';
      formatOptions.second = '2-digit';
      break;

    default:
      // ensureNever(tickMarkType);
  }

  const date = timePoint.businessDay === undefined
    ? new Date(timePoint.timestamp * 1000)
    : new Date(Date.UTC(timePoint.businessDay.year, timePoint.businessDay.month - 1, timePoint.businessDay.day));

  // from given date we should use only as UTC date or timestamp
  // but to format as locale date we can convert UTC date to local date
  const localDateFromUtc = new Date(
    date.getUTCFullYear(),
    date.getUTCMonth(),
    date.getUTCDate(),
    date.getUTCHours(),
    date.getUTCMinutes(),
    date.getUTCSeconds(),
    date.getUTCMilliseconds()
  );

  return localDateFromUtc.toLocaleString(locale, formatOptions);
}