TypeError: Cannot read property 'chart' of undefined at e.Chart.reflow

[mathiasconradt]

I recently upgraded from

    "highcharts-ng": "~0.0.11",
    "highcharts-release": "~4.1.9",
    "angular-bootstrap": "~0.14.3",

to

    "highcharts-ng": "~1.1.0",
    "highcharts-release": "~5.0.11",
    "angular-bootstrap": "~0.14.3",

and only since then get this problem: I have a single page angular application (Angular 1.5.8) using Bootstrap UI (not sure if that matters).

When I have a page with a highchart directive <highchart class="highchart-hover" config="chart"></highchart> in it and I leave this page by navigating to another page/ route, I see this error in the Chrome developer console:

TypeError: Cannot read property 'chart' of undefined
    at e.Chart.reflow (script.js:40411)
    at script.js:40661
    at script.js:25025
    at i (script.js:11128)
    at script.js:11407
    at nrWrapper ((index):43)

Following the stack trace, I see the sources as follows:

As mentioned, with the older highcharts/highcharts-ng version, this problem did not exist.
Any idea what might cause this? I guess there is a check missing whether the chart object actually still exists.

Thanks.

(Unfortunately I don't have a jsfiddle at hand right now for this.)

[mathiasconradt]

Further debugging shows: the problem is here in the highcharts-ng code, where it's not being checked if the ctrl still exists or not. And since a timeout is being used, it should be checked!

[pablojim]

@mathiasconradt Thanks. PRs greatly appreciated. Otherwise I'll get to this when I next do some dev on this tool.

[mathiasconradt]

I am not sure if this is the best solution to fix this:

A check if ctrl!==undefined does not seem to work. I guess it's one of the special behaviours of Angular in combination with the effects of a timeout of 0 seconds:

In line 57, I added a check ctrl!==undefined but the code still tries to execute the reflow, so at that point, ctrl cannot be undefined. On the other hand, when the catch-block is reached, I get the message TypeError: Cannot read property 'chart' of undefined, which is somehow contradictory. Therefore I am using a try-catch-block there now to avoid the error log. It doesn't feel like an optimal solution but it works. Maybe you have a better/cleaner approach to it.

[inad9300]

In case it helps in any way, I'm getting the same exception without the use of highcharts-ng. I initially thought it was somehow related with how the UI-Router transitions were happening, but I'm not sure now. I do have some $timeouts in place too, wrapping the reflows.

[jvargasipince]

Hi,

Someone can resolve this problem?, because i had the same error message with this configurations

"@types/highcharts": "^4.2.57",
"highcharts": "^4.2.1",
"ng2-highcharts": "^1.0.0",

Thanks for answer,

[liampcollins]

Having same issue when navigating away from the page when the chart is being drawn. Think it is because the element is no longer visible (element[0].clientWidth changes to 0 and element[0].clientHeight changes to 0) and this is triggering a redraw. Have submitted a PR with a change that has fixed the issue for me.
#629

[stonexjr]

One way that works is
in your main js

import Highcharts from 'highcharts';
import 'highcharts-ng'

And then add a new rule in the webpack.config.js

{
   test: require.resolve('highcharts'),
   use:[{
            loader: 'expose-loader',
            options: 'Highcharts'
   }]
}

[EricCronje]

Please advise when this will be fixed

[Mythrim]

Does this issue is resolved, I am still facing the same issue in an Angular(v8) application.

[pvskrishna]

In chart export options events: false add this property and try it.

Highcharts.setOptions({ exporting: { chartOptions: { chart: { events: false, }, }, }, }); Highcharts.chart(container, this.chartOptions);