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

[olomakovskyi]

Hi,
I have a single page angular application which contains few charts. When it starts to load charts specified errors are appear in console:

ERROR TypeError: Cannot read property 'chart' of undefined
    at a.Chart.reflow (eval at webpackJsonp.79.module.exports (addScript.js:9), <anonymous>:251:193)
    at ng2-highcharts-base.js:28
    at ZoneDelegate.invokeTask (zone.js:398)
    at Object.onInvokeTask (core.es5.js:4140)
    at ZoneDelegate.invokeTask (zone.js:397)
    at Zone.runTask (zone.js:165)
    at ZoneTask.invoke (zone.js:460)
    at timer (zone.js:1732)

as I can see from debugger, error appears in function reflow() in ng2-highcharts-base.js

it calls function reflow() of highcharts and then falls with exception because this.options is undefined

Could you please advice what might be the cause of it?

[Bigous]

What's the class that you are using ? Did you follow the wiki example ?

[olomakovskyi]

I use import {Ng2HighchartsModule} from 'ng2-highcharts'; as was described in wiki.
I've also found similar issue described for highcharts-ng pablojim/highcharts-ng#594
I understand that libs are different, but since the both are related to highcharts, may be it caused by similar problem. And last commentator mentioned that he also faced with such issue using ng2-highcharts.

[Bigous]

@sephh You are the heavier user of this library. Could you give us a light?

[chriszrc]

I just ran into this problem as well. It started when I changed the parent component's change detection strategy to OnPush (that's the parent of the component in which I actually use the ng-highmaps directive).

After trying a few things, I added:

changeDetection: ChangeDetectionStrategy.OnPush

Not just to the parent, but also to the component with the highchart, and then everything returned to normal.

[chriszrc]

Hmm, I think I did have it happen again, but it's much more rare now. The problem does seem to lie here:

 Ng2HighchartsBase.prototype.reflow = function () {
        var _this = this;
        if (!this.pChart || !this.options) {
            return;
        }
        if (getComputedStyle(this.hostElement.nativeElement).transitionDuration) {

var duration = parseFloat(getComputedStyle(this.hostElement.nativeElement).transitionDuration);

            var interval = setInterval(function () {
                if (duration < 0) {
                    clearInterval(interval);
                }
                _this.pChart.reflow();
                duration -= 50;
            }, duration);
        }
        this.pChart.reflow();
    };

Sometime the bold line tries to get the transitionDuration, but it fails because there is no longer any this.hostElement. A simple check there I think would solve this problem

[Bigous]

Hi @chriszrc ,

If that is the case, it should stop in the if, one line before the parse, not?

[]'s

[chriszrc]

If I remember correctly, I think that was returning -1, I'll have to go back and look-

…

On Wed, Sep 27, 2017 at 3:09 PM, Richard Natal ***@***.***> wrote: Hi @chriszrc <https://github.com/chriszrc> , If that is the case, it should stop in the if, one line before the parse, not? []'s — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#75 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AYgWKYhu73CGvod39agDOpVfFx5XJ-9Pks5smp1ogaJpZM4PHgnf> .

-- -- Chris Marx ZevRoss - Know Your Data Data Science & Spatial Analysis New website: www.zevross.com Ithaca, NY

[AbdurRehman91]

Hi.I am facing this exactly same issue.Can you kindly update me on this?

[Bigous]

Can you post the stack trace?

[Bigous]

And the version of ng2-highcharts that you are using

[EricCronje]

Was this resolved? Same issue here

[Mythrim]

Does this issue is resolved, I am still facing the same issue