Charts - Locale

#Usage

import { ChartCanvas, ChartDataLabels, ChartSvg, ChartXAxis, ChartYAxis } from '@primeui/vue-chart';

<ChartSvg :locale="locale">
    <!-- series and axes -->
</ChartSvg>

locale is a BCP 47 locale string set once on the chart root. Axis tick labels and tooltip values use this locale so formatting is consistent across both surfaces. Data labels render the raw value by default; pass a custom formatter to ChartDataLabels for locale-aware data labels.

#Number Formatting

Set locale to change how numeric axis labels and tooltip values are formatted. Number formatting follows Intl.NumberFormat conventions. Digit grouping, decimal separator, and notation all adapt to the locale.

const locale = 'de-DE'; // 1.284.500 instead of 1,284,500

#Date Formatting

locale also drives date axis labels on time-series charts. The axis adapts its tick labels to match the locale's date conventions. Month names, day/month order, and calendar notation all change with the locale.

const locale = 'ja-JP'; // 1月, 2月, ... instead of Jan, Feb, ...

Use dateTimeFormats on ChartXAxis to override the default format for a specific time unit without changing the locale.

<ChartXAxis
    type="time"
    :date-time-formats="{
        month: { year: 'numeric', month: 'short' },
        day: { month: 'short', day: 'numeric' }
    }"
/>

#Locale and RTL Together

Set locale and dir on the same chart root when a market or operations view needs localized numbers, localized dates, and mirrored layout. The example below uses an Arabic financial time series so the time axis, numeric axis, tooltip rows, legend, and overlay placement all share the same reading direction.

<ChartSvg locale="ar-SA" dir="rtl">
    <!-- financial time-series chart -->
</ChartSvg>

#Custom Tick Format

Use tickFormat on ChartXAxis or ChartYAxis for full control over axis label text. The function receives the raw tick value and its index and must return a string. Use this for currency symbols, percentage signs, or any format that Intl alone cannot produce.

<ChartYAxis :tick-format="(v) => `$${(v / 1000).toFixed(0)}K`" />

tickFormat replaces locale-based formatting. Pass a function (value, index) => string that returns the label text. A plain string is not a format specifier; it bypasses formatting and renders the raw value.

#Translating Chart Text

locale formats numbers and dates on its own, because those come from Intl. Prose does not. Screen-reader descriptions, data-table headers, the export menu, and keyboard hints are written sentences, so a catalogue has to be registered before they change language. Fourteen ship with the library: ar, de, es, fr, he, it, ja, ko, nl, pl, pt, ru, tr, zh. English is built in.

Most of a catalogue is announced rather than drawn. The export menu above shows German labels, and the rest reaches the accessibility tree.

Registration is global, and order does not matter: a catalogue registered after a chart has mounted re-resolves that chart's text. The catalogue follows the same cascade as the number format, taking the locale prop first, then the nearest ancestor [lang] attribute, then 'en'. A regional tag falls back to its base language, so registering de also serves de-AT and de-CH. Only imported catalogues reach the bundle.

text overrides single entries and merges over the resolved language.

<ChartSvg locale="de" :text="{ resetZoom: 'Ansicht zurücksetzen' }">
    <!-- series and axes -->
</ChartSvg>

Every catalogue except English is machine-drafted and has not been reviewed by a native speaker. zh covers Simplified Chinese. The Italian catalogue exports it, which collides with the it of Vitest, Jest, and Mocha, so rename it at the import site inside a spec file.

#API

#ChartSvg / ChartCanvas

#ChartXAxis / ChartYAxis

#DateTimeFormatConfig

Each key maps to an Intl.DateTimeFormatOptions object or a format string for that time unit.

#Related Docs

• RTL
• Time Series Line Examples
• Axes
• Tooltip