Chart.js Locale Configuration
Last Updated :
24 Apr, 2025
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">
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>