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= 
"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>

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"> 
        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>