CODEWITHSUNDEEP
reactjshighchartsreact-highcharts
RashB
RashB

Reputation: 5

highcharts-react-official, how to implement setOptions from the official documentation, in react?

I am using highcharts-react-official, however I cannot figure out how to change the text such as Month, ShortMonth, etc.. in the official highcharts docs, it is accomplished by the following code:

Highcharts.setOptions({
          lang: {
              loading: 'Загрузка...',
              months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
              weekdays: ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'],
              shortMonths: ['Янв', 'Фев', 'Март', 'Апр', 'Май', 'Июнь', 'Июль', 'Авг', 'Сент', 'Окт', 'Нояб', 'Дек']
            }
        });```
How to do it in highcharts-react-official?

Upvotes: 0

Views: 1555

Answers (1)

Wojciech Chmiel
Wojciech Chmiel

Reputation: 7372

You can achieve it by putting this code into a separate file (example highcharts.options.js):

export default function(H) {
  H.setOptions({
    lang: {
      loading: "Загрузка...",
      months: [
        "Январь",
        "Февраль",
        ...
      ],
      weekdays: [
        "Воскресенье",
        "Понедельник",
        ...
      ],
      shortMonths: [
        "Янв",
        "Фев",
        ...
      ]
    }
  });
}

And inside your component import it and initialize like that:

import HighchartOptions from "./highcharts.options";
HighchartOptions(Highcharts);

Demo:

Upvotes: 1

Related Questions