Highcharts DateTime Localization

Question

Can someone point me to how I can localize the date-related Strings which are hardcoded in the HighCharts js-file. For instance, instead of the default 'Feb' date label in the x-axis, I would want the chart to display the localized value 'Fév'. I tried implementing the localization by setting the options on the language object before the chart is instantiated:

Highcharts.setOptions({
lang: {
    months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
    weekdays: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi']
} });

but the chart still displays the default values.

jsFiddle with the problem.

Could you provide a fiddle or some more substatial code? What you've described should be working if you're using the most recent version of Highcharts... Also, have you tried passing that into the chart directly instead of using `Highcharts.setOptions`? — NT3RP, Sep 14 '11 at 17:21
@NT3RP I was using an earlier version that's why it wasn't working, managed to update the revision to the latest and it's working fine. A fiddle of the working code can be found here [link](http://jsfiddle.net/chridam/yfKXm/651/) — chridam, Sep 14 '11 at 20:36

score 63 · Accepted Answer · answered Jan 31 '13 at 18:22

Just to complete a little bit this topic:

All the options related with language are available here

A full Portuguese example:

var highchartsOptions = Highcharts.setOptions({
      lang: {
            loading: 'Aguarde...',
            months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
            weekdays: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
            shortMonths: ['Jan', 'Feb', 'Mar', 'Abr', 'Maio', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
            exportButtonTitle: "Exportar",
            printButtonTitle: "Imprimir",
            rangeSelectorFrom: "De",
            rangeSelectorTo: "Até",
            rangeSelectorZoom: "Periodo",
            downloadPNG: 'Download imagem PNG',
            downloadJPEG: 'Download imagem JPEG',
            downloadPDF: 'Download documento PDF',
            downloadSVG: 'Download imagem SVG'
            // resetZoom: "Reset",
            // resetZoomTitle: "Reset,
            // thousandsSep: ".",
            // decimalPoint: ','
            }
      }
  );

Just a note the docs for the lang options are better explained here: http://api.highcharts.com/highcharts#lang PS: Salvaste-me a vida com esta resposta! — Fabio Antunes, Apr 17 '14 at 14:45

jank · Answer 2 · 2013-08-30T21:13:38.980

And in German (note though that the mini-buttons in Highstocks are still labeled "YTD","1y", and "All") :

Highcharts.setOptions({
                 lang: {
                     decimalPoint: ',',
                     thousandsSep: '.',
                     loading: 'Daten werden geladen...',
                     months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
                     weekdays: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
                     shortMonths: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
                     exportButtonTitle: "Exportieren",
                     printButtonTitle: "Drucken",
                     rangeSelectorFrom: "Von",
                     rangeSelectorTo: "Bis",
                     rangeSelectorZoom: "Zeitraum",
                     downloadPNG: 'Download als PNG-Bild',
                     downloadJPEG: 'Download als JPEG-Bild',
                     downloadPDF: 'Download als PDF-Dokument',
                     downloadSVG: 'Download als SVG-Bild',
                     resetZoom: "Zoom zurücksetzen",
                     resetZoomTitle: "Zoom zurücksetzen"
                       }
});

To change the range selector buttons, some more information is needed:

rangeSelector: {
              buttons: [{
                  count: 1,
                  type: 'month',
                  text: '1M'
            }, {
                  count: 5,
                  type: 'month',
                  text: '5M'
            }, {
                  type: 'all',
                  text: 'Alles'
            }],
            inputEnabled: false,
            selected: 0
        },

month/months -> Monat/Monate  ("M" is the correct abbreviation)
minute/minutes-> Minute/Minuten
millisecond/milliseconds-> Millisekunde/Millisekunden
year/years -> Jahr/Jahre
all -> Alles (everything) or Gesamt (the whole)   
ytd (year to date) -> seit Jahresbeginn (since the start of this year)

score 13 · Answer 3 · answered Sep 15 '11 at 06:26

To localize weekdays, Highcharts.setOptions should be called before chart creation and contain the new weekday names:

Highcharts.setOptions({
    lang: {
        weekdays: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi']
} });

Note that the array should start with the name for Sunday not Monday (the first day of the work week).

Example on jsFiddle

enter image description here

Francesco Meli · Answer 4 · 2019-05-08T17:03:01.477

11

Of course if you are using moment in your stack it is pointless to translate again all these strings from scratch:

moment.locale('it-IT')
Highcharts.setOptions({
  lang: {
    months: moment.months(),
    weekdays: moment.weekdays(),
    shortMonths: moment.monthsShort(),
    ...
  }
})

edited May 08 '19 at 17:03

answered Apr 29 '19 at 20:39

Francesco Meli

2,484
2
21
52

can you give a full example for this. Is there more for ...? – Manuel Mar 10 '20 at 09:48
My current code is very similar to the one shown (it only has months, weekdays, shortMonths). – Francesco Meli Mar 10 '20 at 11:37
This is not specific to dates, but to further help globalize your HighCharts you can set the lang options 'thousandsSep' and 'decimalPoint' using the technique described in the answer to [this question](https://stackoverflow.com/questions/33159354/how-do-i-find-the-decimal-separator-for-current-locale-in-javascript) – Nathan May 30 '21 at 20:55

score 6 · Answer 5 · answered Oct 30 '12 at 16:37

Use the shortMonths property:

Highcharts.setOptions({
    lang: {
    shortMonths: [__('Jan'), __('Feb'), __('Mar'), __('Apr'), __('May'), __('Jun'), 
                  __('Jul'), __('Aug'), __('Sep'), __('Oct'), __('Nov'), __('Dec')]                         },
});

score 4 · Answer 6 · edited Jun 04 '12 at 06:50

4

Don't forget to set your dateTimeLabelFormats to correct format; for example: instead of month: '%b %y' --> month: '%B %y' (use long month)

edited Jun 04 '12 at 06:50

Botz3000

39,020
8
103
127

answered Jun 04 '12 at 03:44

Ming Tsai

41
1

Highcharts DateTime Localization

6 Answers6

Linked