Internationalization in highcharts with Angular 13-CodePudding

I am using Highcharts with Angular 13 and I am trying to show 'No Data found' text Eng or German. But when I switch the language from EN to DE , I keep seeing 'No Data Found' in Engllish in linechart.

I am trying to reset highcharts Options in translate.onLangChange() function. It does not work. Also I tried this.highcharts.chart(options).redraw() which did not work, either.

this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
    Highcharts.setOptions({lang: {noData: this.translate.instant('no.data.found')}})
});

Here is my highchart view. How can I apply internationalization and update this view to show 'Es wurden keine Daten gefunden' when I switch the language to German?

CodePudding user response：

When I put the data via service, lang nodata works, for example.

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
import { DataService } from './data.service';
import HC_noDataModule from 'highcharts/modules/no-data-to-display';
HC_noDataModule(Highcharts);

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})

export class AppComponent {
  Highcharts: typeof Highcharts = Highcharts;
  chartOptions: Highcharts.Options;

  constructor(dataService: DataService) {
    this.chartOptions = {
      lang: {
        noData: dataService.langOpt()
      },
      series: [
        {
          type: 'line',
          //data: dataService.getData(),
        },
      ],
    };
  }
}

DEMO

CodePudding user response：

Thanks for your answer but I think dataService.langOpt() does not do different than writing directly 'Nichts zu anzeigen'. I am trying to use Angular's TranslateService and get the translated data with this.translateService.instant('no.data.found');. I have a language switcher component. Let's say at first the selected language is English. Then I see 'No data found' text in the chart. When I switch the the language to German, I keep seeing the same text 'No data found'. If I refresh the page, I see the german translation. The no data text is not updated instantly even though other axis labels etc. are translated instantly.