[Solved]-Angular Highcharts - How to enable noData options and update it dynamically-Highcharts

1. what is the proper way of using nodata option with angular 5
2. how to make sure it appears consistently? probably different configuration like setdata([]) or setdata(null) makes it appears in consistently, but i am not able to find out one root cause behind its inconsistency.
3. how can i toggle nodata message dynamically.

re 1. the nodata module should work automatically, so if you will add some point to one of your currently visible series, then the "no-data" message disappears. similarly, when you remove() the series points, so that the series will be empty, then the "no-message" information will be visible on the chart. in case of using it manually, of course you can do it just like you mentioned above. here is the simple example of use (with buttons included): https://stackblitz.com/edit/highcharts-toggling-nodata-w5fwkf

re 2. looks fine if using setdata([]) and setdata(null). here is the example: https://stackblitz.com/edit/highcharts-toggling-nodata-54xrqh . if you mean something different, could you describe your question more precisely?

re 3. if you mean change the nodata message dynamically, you should set the chart.options.lang.nodata property equal to some new string, then call chart.hidenodata() and chart.shownodata to refresh element value. here is the example applied to the ng: https://stackblitz.com/edit/highcharts-toggling-nodata-hwnzcl

[edit]

refering to your question update, in order to use a specific module directly within component and not by setting it in providers, just delete the { provide: highcharts_modules, usefactory: () => [nodatatodisplay] } from app.module.ts file, and load appropriate module in app.component.ts using require() syntax, like below:

import highcharts from 'highcharts';

const nodata = require('highcharts/modules/no-data-to-display')
nodata(highcharts)

live example: https://stackblitz.com/edit/highcharts-toggling-nodata-muxx9s

kind regards!

**