Chart.js Locale Configuration
Last Updated :
28 Nov, 2023
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 =
</ script >
< script src =
</ script >
</ head >
< body >
< h2 style = "color: green" >
GEEKSFORGEEKS 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 =
</ script >
< script src =
</ script >
</ head >
< body >
< h2 style = "color:green" >
GEEKSFORGEEKS 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:
The output of the above code (Example 2)
Reference: https://www.chartjs.org/docs/latest/configuration/locale.html
Share your thoughts in the comments
Please Login to comment...