HighCharts menuItem value not updated

Question

I need to translate my highcharts when the user selects a different language. I have a chartservice that listens to the translationService and assign the value received from translationService to downloadCSV attribute of chart. here is the code"

private downloadCsvText= '';
this._translateService.get('TL_DOWNLOAD_CSV').subscribe((res: string) => this.downloadCsvText=res);

Highcharts.setOptions({
    global: { useUTC: false },
    lang: {
        noData: this.chartNoData,
        downloadCSV: this.downloadCsvText
    }
});

and in my methods that create the chart I have:

 exporting: {
                filename: 'MyChart',
                buttons: {
                    contextButton: {
                        menuItems: ['downloadCSV']
                    }
                },
                csv: {
                    itemDelimiter: ';'
                },
                fallbackToExportServer: false
            }

However, at the moment that user changes the language, the menuItems is the only thing that is not translated. Any guidance is appreciated.

I am using

• Angular 8
• "highcharts": "6.1.1"
• "highcharts-export-csv": "=1.4.8",
• "highcharts-pattern-fill": "3.0.3",

Answer 1

Currently, your code does something like is shown in this demo:https://jsfiddle.net/BlackLabel/kL5xahve/ - which is wrong because the options are defined after the chart has been initialized.

The easiest solution is to destroy the chart and initializing it once again after the change language.

Demo: https://jsfiddle.net/BlackLabel/wLhxc0qb/

var chartOptions = {

  series: [{
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
  }],

  exporting: {
    buttons: {
      contextButton: {
        menuItems: ["downloadCSV"]
      }
    },
  }
};

var chart = Highcharts.chart('container', chartOptions);

Highcharts.setOptions({
  lang: {
    downloadCSV: 'test'
  }
});

chart.destroy();

Highcharts.chart('container', chartOptions);