Angular Highcharts - update noData message dynamically

[saif003]

I am locally using following highcharts dependencies:

"angular-highcharts": "5.2.12"
"highcharts": "6.1.0"
"@types/highcharts": "5.0.19"
Here is a live demo https://stackblitz.com/edit/highcharts-toggling-nodata,

First of all I would like to point out that the usage and enabling of the noData functionality for angular highCharts specifically is quite shady. There is no proper guideline available any where regarding how to use it properly.

Now coming to the real issue, I am importing noData using the following way,

Code: Select all

import NoDataToDisplay from 'highcharts/modules/no-data-to-display';
...    
@NgModule({
  ...
  providers: [
  { provide: HIGHCHARTS_MODULES, useFactory: () => [NoDataToDisplay] }
]

and then to update the noData message dynamically, i am using the following approach:

Code: Select all

const options = this.chartConfig.ref.options;
  options.lang.noData = `no data from: ${chartData.customMsgFromDate} to ${chartData.customMsgEndDate}.`;
this.chartConfig.ref.update(options, true);

but this above approach is not working, kindly let me know how can i update noData message dynamically?

P.S I did manage to find this(http://jsfiddle.net/pszyn1e4/1/) fiddle for achieving things using plain JavaScript but haven't been able to use the same approach with angular highcharts. Here is the code used in the fiddle.

if (!chart.hasData()) { chart.hideN ... ssage"); }

Are these methods not available for the highcharts version I am using? do I need to upgrade to the latest version? Any help would be highly appreciated.

[wojtek]

Hi saif003,

I am locally using following highcharts dependencies:

"angular-highcharts": "5.2.12"
"highcharts": "6.1.0"
"@types/highcharts": "5.0.19"

Unfortunately, you are using "angular-highcharts" which is not the official angular wrapper. Please, contact with contributors of your wrapper.

The official highcharts-angular wrapper:
https://github.com/highcharts/highcharts-angular

Kind regards.