Internationalization in highcharts with Angular 13

Question

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?

When I put the data via service, I don't see this problem. If you can please adapt my demo to your case, this will give me a better look at it. — Sebastian Hajdus, Jan 05 '23 at 11:14

score 0 · Answer 1 · answered Jan 05 '23 at 11:13

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

score 0 · Answer 2 · answered Jan 05 '23 at 11:58

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.

Please use comments, and not answers, for this type of message. You can also edit your original question and add supporting information that you mention in the post. — akseli, Jan 06 '23 at 22:39

Internationalization in highcharts with Angular 13

2 Answers2