[RadChart] Error in directive tkCartesianHorizontalAxis inserted hook

[xubmuajkub]

I'm currently working with the Chart on NS-Vue and this error occurred. If anyone know please help me to solve it. I've spent a day on finding the cause but I cannot find it.

Err log

[Vue warn]: Error in directive tkCartesianHorizontalAxis inserted hook: "TypeError: Cannot read property '_ngKey' of undefined"

My code

I use the sample code from https://github.com/NativeScript/nativescript-ui-samples-vue/blob/master/chart/app/examples/series/BarSeries.ts

Dependencies

"nativescript-ui-chart": "^7.0.0", "nativescript-ui-core": "^4.0.0", "tns-core-modules": "^6.2.3", "nativescript-vue": "^2.4.0",

Platform

Android & iOS version: 6.2.0

If more information is needed please let me know I will provide as much as possible

[DevPlus31]

I am having the same error [Vue warn]: Error in directive tkCartesianHorizontalAxis inserted hook: "TypeError: Cannot read property '_ngKey' of undefined"

It seems the owner is undefined on setupCssScope method.

[JonathanLouw]

I am having the same error [Vue warn]: Error in directive tkCartesianHorizontalAxis inserted hook: "TypeError: Cannot read property '_ngKey' of undefined"

It seems the owner is undefined on setupCssScope method.

Is there anything that can be done to fix this? I'm having the same issue and the chart only seems to work in components that have a Page element as it's root element inside the template tag. Using a custom component breaks it and i get the same error as the original issue.

[ashvinders]

Im having the same issue with angular implementation. If you put the chart around an ngIf it produces the same error.

[JonathanLouw]

Im having the same issue with angular implementation. If you put the chart around an ngIf it produces the same error.

I had this issue before, I primarily use Vue so I'm not entirely sure this will work for angular but use ng-show to toggle visibility for any parent elements of your chart all the way up to your root element (ideally the Page element). It seems using if directives breaks the charts references and causes an issue and letting it load into a page but is hidden until needed is what has worked for me so far.

[ashvinders]

I had this issue before, I primarily use Vue so I'm not entirely sure this will work for angular but use ng-show to toggle visibility for any parent elements of your chart all the way up to your root element (ideally the Page element). It seems using if directives breaks the charts references and causes an issue and letting it load into a page but is hidden until needed is what has worked for me so far.

Thanks but that wasn't really an option and its doesn't solve the problem at hand, I was able to temporarily fix the issue by updating the chart-axis.common.js in the chart packages. Hopefully they put out a proper fix soon.

`

   CartesianAxis.prototype.onLoaded = function () {
    var _this = this;    
     if (!this._label) {
        var label = new ChartAxisLabel();
        this._label = label;
        //added this line because owner is null
        var derivedOwner = this.owner == null ? this.parent : this.owner;
        ui_chart_common_1.setupCssScope(derivedOwner, this._label);
        this._addView(this._label);
    }
    _super.prototype.onLoaded.call(this);
    this._labelPropertyChangeHandler = this._labelPropertyChangeHandler || (function (args) {
        _this.applyLabelPropertyFromStyle(args.propertyName);
    });
    this.attachLabelChangeListeners();
    this.applyLabelPropertyFromStyle();
};

`

[oskarinn]

I am having the same problem with angular implementation. I put the chart around an ngFor and produced the same error.

I solved this problem by returning from version 7.1.1 to 6.0.0 of the nativescript-ui-chart plugin. Then I made npm dedupe to eliminate duplicate references. This works for me.

If you do not need complement support with the dark mode of iOS or Android, then it may work for you too.

I will wait for them to implement the fix proposed by @ashvinders (by the way it worked for me too).

[DevPlus31]

I have the same issue I am waiting for an update.

[wendt88]

nativescript-ui-chart 6.0.0 does no works with nativescript 6.4 in iOS, so I have to update it. By clearing the content of function setupCssScope in ui-chart.commom.js, I "resolved" the problem (it's in a vue-project too). Debugging a bit, I found out, that series and axis call the setupCssScope-function inside onLoad and pass this.owner, but this.owner is always null. It should be set inside onTrackballChanged which never gets called.

[cghislai]

For angular, I worked around this issue by using home-made directives ad manually setting the axis owner before calling the chart setter:

@Directive({
    selector: '[wkCartesianHorizontalAxis]'
})
export class WorkardounCartesianHorizontalAxisDirective implements OnInit {


    constructor(
        private owner: RadCartesianChartComponent,
        private elementRef: ElementRef,
    ) {
    }

    ngOnInit(): void {
        const axis = this.elementRef.nativeElement;
        axis.owner = this.owner;
        const cartesianChart = this.owner.cartesianChart;
        cartesianChart.horizontalAxis = axis;
    }
}

I had to use them for both axes

[bsansone]

I'm experiencing this issue too with Vue LineSeries chart

[wendt88]

https://github.com/NativeScript/nativescript-ui-feedback/issues/1387

[guillemc23]

For angular, I worked around this issue by using home-made directives ad manually setting the axis owner before calling the chart setter:

@Directive({
    selector: '[wkCartesianHorizontalAxis]'
})
export class WorkardounCartesianHorizontalAxisDirective implements OnInit {


    constructor(
        private owner: RadCartesianChartComponent,
        private elementRef: ElementRef,
    ) {
    }

    ngOnInit(): void {
        const axis = this.elementRef.nativeElement;
        axis.owner = this.owner;
        const cartesianChart = this.owner.cartesianChart;
        cartesianChart.horizontalAxis = axis;
    }
}

I had to use them for both axes

Could you explain a bit deeper how to get this workaround working?