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

Answer 1

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)

Answer 2

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(),
    ...
  }
})

Answer 3

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

Answer 4

Use the shortMonths property:

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

Answer 5

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: ','
            }
      }
  );

Answer 6

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