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.

Answer 1

Use the shortMonths property:

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

Answer 2

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

Answer 3

For the Dutch language (Nederlands)

var highchartsOptions = Highcharts.setOptions({
  lang: {
    loading: 'Wordt geladen...',
    months: ['januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september', 'oktober', 'november', 'december'],
    weekdays: ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag'],
    shortMonths: ['jan', 'feb', 'maa', 'apr', 'mei', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'dec'],
    exportButtonTitle: "Exporteren",
    printButtonTitle: "Printen",
    rangeSelectorFrom: "Vanaf",
    rangeSelectorTo: "Tot",
    rangeSelectorZoom: "Periode",
    downloadPNG: 'Download als PNG',
    downloadJPEG: 'Download als JPEG',
    downloadPDF: 'Download als PDF',
    downloadSVG: 'Download als SVG',
    resetZoom: 'Reset',
    resetZoomTitle: 'Reset',
    thousandsSep: '.',
    decimalPoint: ','
    }
  }
);

Answer 4

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 5

Complete russian localization (русская локализация).

Highcharts.setOptions({
            lang: {
                loading: 'Загрузка...',
                months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
                weekdays: ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'],
                shortMonths: ['Янв', 'Фев', 'Март', 'Апр', 'Май', 'Июнь', 'Июль', 'Авг', 'Сент', 'Окт', 'Нояб', 'Дек'],
                exportButtonTitle: "Экспорт",
                printButtonTitle: "Печать",
                rangeSelectorFrom: "С",
                rangeSelectorTo: "По",
                rangeSelectorZoom: "Период",
                downloadPNG: 'Скачать PNG',
                downloadJPEG: 'Скачать JPEG',
                downloadPDF: 'Скачать PDF',
                downloadSVG: 'Скачать SVG',
                printChart: 'Напечатать график'
            }
    });

Answer 6

In Chinese

var highchartsOptions = Highcharts.setOptions({
    lang: {
        loading: '加载中...',
        months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月', '9月', '10月', '11月', '12月'],
        shortMonths: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月', '9月', '10月', '11月', '12月'],
        weekdays: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
        exportButtonTitle: '导出',
        printButtonTitle: '打印',
        rangeSelectorFrom: '从',
        rangeSelectorTo: '到',
        rangeSelectorZoom: "缩放",
        downloadPNG: '下载PNG格式',
        downloadJPEG: '下载JPEG格式',
        downloadPDF: '下载PDF格式',
        downloadSVG: '下载SVG格式'
    }
}