Chart.js Locale Configuration
Chart.js Locale Configuration facilitates the locale option in order to set the numbers of ticks on scales in accordance with language-specific number convention formatting. The locale is represented as a character sequence conforming to the Unicode BCP 47 locale identification standard.
- A language code.
- (Optionally) a script code
- (Optionally) a region (or country) code
- (Optionally) one or more variant codes
- (Optionally) one or more extension sequences
Note: All of these components are separated by hyphens. As a default, the chart utilizes the platform’s default locale for its operations.
CDN Link
<script src="https://cdn.jsdelivr.net/npm/chart.js@latest/dist/chart.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
Syntax
new Chart(chart, { type: "bar", data: { // Labels and data }, options: { locale: }, });
Example 1: The following code demonstrates converting the labels and data into German. In the below code, the default language changes to the German language with the help of locale configuration.
HTML
<!DOCTYPE html> < html > < head > < title >Chart.js with Locale</ title > < script src = "https://cdn.jsdelivr.net/npm/chart.js@latest/dist/chart.min.js" > </ script > < script src = "https://cdn.jsdelivr.net/npm/chart.js" > </ script > </ head > < body > < h2 style = "color: green" > w3wiki Chart.js Locale configuration </ h2 > < div style="width: 1000px; ackground-color: aquamarine"> < canvas id = "myLocale" ></ canvas > </ div > < script > const chart = document.getElementById("myLocale"); new Chart(chart, { type: "bar", data: { labels: ["Januar", "Februar", "März", "April", "Mai"], datasets: [ { label: "Umsatz", data: [20, 10, 30, 50, 40], }, ], }, options: { locale: "de-DE", // German code }, }); </ script > </ body > </ html > |
Output:
Example 2: It demonstrates converting labels and currencies. In the below code, the default language changes into the French language and currency into euros with the help of locale configuration.
HTML
<!DOCTYPE html> < html > < head > < title >Chart.js with Locale</ title > < script src = "https://cdn.jsdelivr.net/npm/chart.js@latest/dist/chart.min.js" > </ script > < script src = "https://cdn.jsdelivr.net/npm/chart.js" > </ script > </ head > < body > < h2 style = "color:green" > w3wiki Chart.js Locale configuration </ h2 > < div style="width:1000px; background-color:aquamarine"> < canvas id = "myLocale" ></ canvas > </ div > < script > const chart = document.getElementById("myLocale"); new Chart(chart, { type: "bar", data: { labels: ["Janvier", "Février", "Mars", "Avril", "Mai"], datasets: [ { label: "Ventes", data: [300, 200, 100, 400, 500], }, ], }, options: { locale: "fr-FR", currency: "EUR", }, }); </ script > </ body > </ html > |
Note: The changes in currencies are only reflected on tooltips and legends of the chart.
Output:
Reference: https://www.chartjs.org/docs/latest/configuration/locale.html