How to enable noData with highcharts and angular

Question

I would like to enable the "noData" functionality, which by default displays a message when there's no data to be shown in the chart. It says in their docs that the feature requires the file no-data-to-display.js to be loaded in the page.

I already have this file in my node_modules/highcharts folder, but I'm not sure how I should load it from there, so I would like to know how to do that as well. For now, I have loaded it by adding this script tag to my index.html:

<script src="http://code.highcharts.com/modules/no-data-to-display.js"></script> 

It gives me the following error:

Uncaught ReferenceError: Highcharts is not defined
    at no-data-to-display.js:10
    at no-data-to-display.js:10

Here is all highcharts related stuff in my app.module.ts

import { ChartModule } from 'angular2-highcharts';
import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';
import * as Highcharts from 'highcharts';

imports: [
    ChartModule,
],
providers: [{
    provide: HighchartsStatic,
    useValue: Highcharts
}]

Thanks.

EDIT:

I've tried to import the no-data file in my app.module.ts:

import HighchartsNoDataToDisplay from 'highcharts/modules/no-data-to-display.src.js';

I am not sure what the next step is. Adding HighchartsNoDataToDisplay to the imports array gives me an error.

Answer 1

I was able to get this working by doing the following:

//wherever you're importing the highcharts library
import Highcharts from "highcharts";
import NoDataToDisplay from 'highcharts/modules/no-data-to-display';

NoDataToDisplay(Highcharts); //initialize the module

//wherever you're setting up the chartOptions array before the call
// to .chart('container', chartOptions)
    //noData
    chartOptions['lang'] = {
        noData: "No Data Available"
    };