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.

check this [post](https://github.com/gevgeny/angular2-highcharts/issues/47) it will helpfull — Deep 3015, Sep 25 '17 at 05:45
@Deep3015 I still don't understand what to do :/ I'm not using systemjs. Can you explain? — Jesper, Sep 25 '17 at 14:46
@Deep3015 I've never really used plunker.. :S How can I add my project to it? — Jesper, Sep 25 '17 at 14:57

score 7 · Answer 1 · answered Mar 16 '18 at 19:36

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"
    };

How to enable noData with highcharts and angular

1 Answers1