Internationalization

ChartSpire supports multiple languages. Built-in: en-US (English) and zh-CN (Chinese).

Setting the Language

const chart = new ChartSpire({
  container: document.getElementById('chart-container'),
  locale: 'en-US',
  // ...other options
})

// Change at runtime
chart.setLocale('zh-CN')

Custom Languages

Use registerLocale to add a custom language. Call it before creating the chart.

import { ChartSpire, registerLocale, loadLocales } from 'chartspire'

// Required: tooltip labels when hovering over candles
registerLocale('fr-FR', {
  time: 'Temps: ', open: 'Ouvert: ', high: 'Haut: ', low: 'Bas: ',
  close: 'Fermer: ', volume: 'Volume: ', change: 'Changement: ', turnover: 'Chiffre d\'affaires: ',
  second: 'S', minute: '', hour: 'H', day: 'J', week: 'S', month: 'M', year: 'A'
})

// Optional: menus, settings, themes (use loadLocales)
loadLocales('fr-FR', {
  symbol_search: 'Recherche de symbole',
  setting: 'Paramètres',
  'Light Theme 1': 'Thème Clair 1',
  'Dark Theme': 'Thème Sombre',
  // See src/i18n/en-US.json for full key list
})

const chart = new ChartSpire({ container: '#chart', locale: 'fr-FR', /* ... */ })

For a complete translation, provide both tooltip keys and interface keys. Reference src/i18n/en-US.json for all available keys.

Updating Existing Locales

import { updateLocaleField } from 'chartspire'

updateLocaleField('en-US', 'volume', 'Trading Volume')

RTL Languages

Set data-locale on your container and add CSS:

.chartspire-ui[data-locale="ar-SA"] { direction: rtl; }

document.getElementById('chart-container')?.setAttribute('data-locale', 'ar-SA')