0

I'm trying to translate Highcharts' name series using ng2-translate with Angular 2 RC.6.

I have the chart configuration in my constructor, where I call a function to translate the series name:

constructor(private translate: TranslateService) {  
  this.config = {
    series: [{ name: this.getTranslation('TRANSLATETHIS') }
  }
}

Inside that function, I call the TranslationService:

getTranslation(word) {
  this.translate.get(word).subscribe((res: string) => {
    return res;
  })
}

I managed to log the right translation into the console. However, Highcharts keep showing Series 1 instead of the translated word.

If I use the TranslateService inside the constructor (without a function), it works, though.

However, I have to translate other things, so it would be handy using a function instead of repeating the service for every word.

brians69
  • 485
  • 2
  • 11
  • 24
  • My guess is that this is a JavaScript async race condition. The `get` call above is *async*, so your `getTranslation` is returning after highcharts does it's thing. If you are **certain** that your translations have already loaded, you should be using `instant`. – Mark Sep 10 '16 at 15:34
  • If you want to change a chart dynamically, like series name, you could update a series using [Series.update()](http://api.highcharts.com/highcharts/Series.update). – Kacper Madej Sep 16 '16 at 11:21

0 Answers0