Internationalization

Charturbo ships its built-in text in English, Korean and Simplified Chinese. One locale setting drives both number and date formatting (through Intl) and every string the library writes itself: accessibility summaries and keyboard help, screen-reader announcements, data table captions and headers, CSV headers, default tooltips, legend and breadcrumb labels, and default series names.

Text you pass in (titles, series names, category labels) is shown as given.

Setting the locale

import { Charturbo } from 'charturbo';

// For the whole SDK instance
const sdk = await Charturbo.create(canvas, { locale: 'ko-KR' });

// Change it later: labels, tooltips and accessibility text update in place
sdk.setLocale('zh-CN');

// Per chart (line, area, candlestick, OHLC, histogram and combo charts accept `locale`)
sdk.renderLineChart(series, { locale: 'en-US' });

The effective locale of a chart is resolved in this order:

1. The chart's own locale option
2. The SDK locale (create({ locale }) or setLocale)
3. The page language: <html lang="...">
4. The browser language: navigator.language

TIP

Set <html lang> on your page. Screen readers use it to pick a voice, and Charturbo then follows it without any code.

Languages

Locale tag	Built-in text
en, en-* and any language without built-in text	English
ko, ko-*	Korean
zh, zh-* (including zh-TW, zh-HK)	Simplified Chinese

Numbers and dates always use the full tag you give, so de-DE gets German number formatting with English text, and zh-TW gets Taiwanese number formatting with Simplified Chinese text. To show Traditional Chinese text, register it as shown below.

import { CHARTURBO_LANGUAGES, resolveLanguage } from 'charturbo';

CHARTURBO_LANGUAGES;      // ['en', 'ko', 'zh-CN']
resolveLanguage('ko-KR'); // 'ko'
resolveLanguage('fr');    // 'en'

Overriding strings and adding languages

registerMessages(locale, messages) overrides any built-in string, or adds a language on top of English. Messages are grouped by the part of the library that shows them (common, a11y, core, box, combo, business, hierarchy, sparkline). Pass only the keys you want to change.

import { registerMessages } from 'charturbo';

// Change one Korean word everywhere
registerMessages('ko', { common: { total: '총계' } });

// Add Japanese (keys you do not give stay English)
registerMessages('ja', {
  common: {
    total: '合計',
    value: '値',
    seriesName: (index) => `系列 ${index}`,
    position: (i, n) => `${n} 件中 ${i} 件目。`,
  },
});

sdk.setLocale('ja-JP');

Lookup order for a tag such as pt-BR: built-in language (English) → overrides registered for pt → overrides registered for pt-BR.

Some messages are functions because word order and plural forms differ between languages. Their arguments are strings that are already formatted in the chart locale, plus a raw count when a plural form is needed:

registerMessages('en', {
  common: { points: (n, count) => `${count} ${n === 1 ? 'sample' : 'samples'}` },
});

Registrations apply to charts rendered or refreshed afterwards. Call sdk.setLocale(sdk.getLocale()) to refresh the current chart immediately.

To see every key, read the current messages:

import { getMessages } from 'charturbo';

const m = getMessages('en');
console.log(Object.keys(m.a11y));

The CharturboMessages type describes every group and key, so your editor autocompletes them.

What is not translated

• Error messages thrown to developers (Error, CharturboInitError) stay in English so they can be searched.
• Default download file names (chart.png, chart.svg).
• Unit symbols in number formats (k, M, KB).

Examples site and documentation

The examples site and this documentation are also available in all three languages. Use the language menu at the top of each page.

See also

• Number & Date Formats
• Accessibility
• Core Concepts