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: ,
defaultLocale: 'fr',
}
}
The json template files for locales are located in [/dist/locales](https://cdn.jsdelivr.net/npm/apexcharts/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: ,
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