Localization

ApexCharts has a locales property where you can set your preferred language text for datetime values (months/days) as well as title text for toolbars.


var fr = require("apexcharts/dist/locales/fr.json")
{
  chart: {
   locales: [fr],
   defaultLocale: 'fr',
  }
}

The json template files for locales are located in /dist/locales directory.

In a browser environment, you can directly load the json file and store in a variable.


$.getJSON('https://cdn.jsdelivr.net/npm/apexcharts/dist/locales/fr.json', function(data) {
var fr = data

var options = {
 chart: {
   locales: [fr],
   defaultLocale: 'fr',
 }
}
});

If you do not want to load an external file, you can copy and paste the locale template code into the locales property like the example below


var options = {
  chart: {
    locales: [{
      "name": "en",
      "options": {
        "months": ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
        "shortMonths": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        "days": ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
        "shortDays": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
        "toolbar": {
            "exportToSVG": "Download SVG",
            "exportToPNG": "Download PNG",
            "menu": "Menu",
            "selection": "Selection",
            "selectionZoom": "Selection Zoom",
            "zoomIn": "Zoom In",
            "zoomOut": "Zoom Out",
            "pan": "Panning",
            "reset": "Reset Zoom"
        }
      }
    }],
    defaultLocale: "en"
  }
}

Setting locales globally across all charts

You do not need to set locales for each chart instance. You can set the global localization for all charts by


Apex.chart = {
  locales: [...localeConfigurationObject],
  defaultLocale: "en"
}

Example of setting locales globally

For the full set of options available for the locales, see locales configuration

Why Choose ApexCharts

Localization

Stay Updated