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.

Chore

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? – Education

@Education 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 – Chore

Answer 1

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

Gavingavini

Thanks for your contribution. – Chore

Just a note the docs for the lang options are better explained here: api.highcharts.com/highcharts#lang PS: Salvaste-me a vida com esta resposta! – Bogeyman

"Feb" should be "Fev" in portuguese short month names :) – Beaudry

Answer 2

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)

Govea

Answer 3

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

Upton

Answer 4

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

Cerelly

can you give a full example for this. Is there more for ...? – Wriggle

My current code is very similar to the one shown (it only has months, weekdays, shortMonths). – Cerelly

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 – Crystallize

Answer 5

Use the shortMonths property:

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

Selfimportant

Answer 6

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

Ferromagnetic