CODEWITHSUNDEEP
angularhighchartsinternationalizationngx-translate
spalm
spalm

Reputation: 128

Highcharts lang with ngx-translate

I'm currently using Angular 4 for my project, and am using ngx-translate (i18n) to enable users to switch languages. These are set in a i18n folder with json files for different languages. I'm also using high charts for a number of graphs and I found out when I checked out their API that they are also using i18n for languages. However, from what I could gather on the API documentation is that I need to use setOptions on HighCharts and specify the translation words there, however, I was wondering if that could be done using the json files I'm currently using for ngx-translate? Or if users are able to switch between languages, how am I supposed to do that with setOptions?

Upvotes: 0

Views: 1441

Answers (1)

Kamil Kulig
Kamil Kulig

Reputation: 5826

This demo shows how to perform setOptions dynamically: http://jsfiddle.net/kkulig/1qLqhtmd/

var chart = Highcharts.chart('container', {

  series: [{
    data: [5.5656565, 20]
  }]
});


setTimeout(function (){
  Highcharts.setOptions({
    lang: {
      decimalPoint: ' and after the dot is '
    }
  });
  chart.redraw();
}, 3000);

Notice that chart.redraw() is necessary here. If we comment it out the decimal point will be different only in tooltip after 3s (axes labels won't change).

I think that the easiest approach here is to create function that is going to format the JSON fetched from your file to the structure acceptable by setOptions (because its argument is JSON too) and use setOptions as shown in the example above.

Upvotes: 1

Related Questions