Localization

Every visible UI string in EliteChart is keyed against a message catalogue. Override the catalogue at the React boundary and the whole UI re-renders in your language.

Quick example

'use client';
import { EliteChart, MessagesProvider } from '@elitechart/elitechart';
import '@elitechart/elitechart/styles.css';
import esES from '@elitechart/elitechart/locales/es-ES';

export default function Page() {
  return (
    <MessagesProvider messages={esES}>
      <EliteChart symbol="BTCUSD" timeframe="1h" />
    </MessagesProvider>
  );
}

How it works

The component tree reads strings from useMessages() — a hook re-exported from the package. The default messages are English; the package ships a small set of pre-built locales (en-US, es-ES, de-DE, fr-FR, ja-JP, zh-CN). You can also supply your own message map.

Number and date formatting follow the active Intl locale by default. Override with <MessagesProvider locale="ko-KR"> to decouple the locale from the message catalogue.

Variations

Partial override

import enUS from '@elitechart/elitechart/locales/en-US';

<MessagesProvider messages={{ ...enUS, 'toolbar.symbol': 'Pair' }}>
  <EliteChart />
</MessagesProvider>

Detect from the browser

const lang = (typeof navigator !== 'undefined' ? navigator.language : 'en-US');

API

Related

• Anatomy: overview
• Persistence