i18n

Localization is part of the chart options contract. A single updateOptions() patch keeps the formatter locale, timezone, indicator action labels, and source names in sync.

Configure the initial locale

import { FinancialChart } from "@ardinsys/financial-charts";

const chart = new FinancialChart(root, {
  timeRange: "auto",
  type: "candle",
  stepSize: 15 * 60 * 1000,
  maxZoom: 100,
  volume: true,
  locale: "en-US",
  timeZone: "UTC",
  localeValues: {
    "en-US": {
      common: {
        sources: {
          open: "Open",
          high: "High",
          low: "Low",
          close: "Close",
          volume: "Volume",
        },
      },
      indicators: {
        actions: {
          show: "Show",
          hide: "Hide",
          settings: "Settings",
          remove: "Remove",
        },
      },
    },
  },
});

Missing strings fall back to the built-in default bundle, so you only need to provide values that differ.

Switch locale and timezone at runtime

chart.updateOptions({
  locale: "hu-HU",
  timeZone: "Europe/Budapest",
  localeValues: {
    "hu-HU": {
      common: {
        sources: {
          open: "Nyito",
          high: "Max",
          low: "Min",
          close: "Zaro",
          volume: "Forgalom",
        },
      },
      indicators: {
        actions: {
          show: "Megjelenites",
          hide: "Elrejtes",
          settings: "Beallitasok",
          remove: "Torles",
        },
      },
    },
  },
});

DefaultFormatter uses locale and timeZone for price, volume, axis, tooltip, seconds, and sub-minute date labels. Custom formatters can implement setTimeZone() and getTimeZone() to participate in the same runtime update path.

Use a custom formatter

import { DefaultFormatter } from "@ardinsys/financial-charts";

class TradingFormatter extends DefaultFormatter {
  formatTooltipPrice(price: number, decimals: number): string {
    return `${price.toFixed(decimals)} USD`;
  }
}

chart.updateOptions({
  locale: "en-US",
  timeZone: "America/New_York",
  formatter: new TradingFormatter({
    locale: "en-US",
    timeZone: "America/New_York",
    dateTimeFormatOptions: {
      second: { hour: "numeric", minute: "2-digit", second: "2-digit" },
      subMinute: {
        minute: "2-digit",
        second: "2-digit",
        fractionalSecondDigits: 3,
      },
    },
  }),
});

If you pass only formatter, the chart adopts the formatter's locale and timezone when the formatter exposes them.

Wire an app i18n store

function syncChartLocale(locale: string, timeZone: string) {
  chart.updateOptions({
    locale,
    timeZone,
    localeValues: {
      [locale]: {
        common: {
          sources: {
            open: t("chart.sources.open"),
            high: t("chart.sources.high"),
            low: t("chart.sources.low"),
            close: t("chart.sources.close"),
            volume: t("chart.sources.volume"),
          },
        },
        indicators: {
          actions: {
            show: t("chart.indicators.show"),
            hide: t("chart.indicators.hide"),
            settings: t("chart.indicators.settings"),
            remove: t("chart.indicators.remove"),
          },
        },
      },
    },
  });
}

Call this whenever the app locale or timezone changes. The chart updates indicator labels, action titles, axis labels, and crosshair/tooltip formatting in one redraw.