ngx-charts: Cannot read property 'nativeElement' of undefined when View is undefined

I’m submitting a … (check one with “x”)

[X ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior I’m using the latest version of ngx-charts with Angular 4.0.0 and I get an error when trying to set view to undefined to get the chart at parent’s div dimensions.

ChartWindowComponent.html:52 ERROR TypeError: Cannot read property 'nativeElement' of undefined at LineChartComponent../src/common/base-chart.component.ts.BaseChartComponent.getContainerDims (index.js:9031) at LineChartComponent../src/common/base-chart.component.ts.BaseChartComponent.update (index.js:9015) at LineChartComponent../src/line-chart/line-chart.component.ts.LineChartComponent.update (index.js:14596) at LineChartComponent../src/common/base-chart.component.ts.BaseChartComponent.ngOnChanges (index.js:9004)

Expected behavior Just get the chart to fit to the parent container size.

ngx-charts version: 5.1.2

Angular version: 4.0.0

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 3
Comments: 20 (3 by maintainers)

Most upvoted comments

I don’t know if you guy had resolved this issue: MatSelect.html:1 ERROR TypeError: Cannot read property ‘nativeElement’ of undefined. I found a solution by setTimeOut and waited for all view init.

ngAfterViewInit() {
    setTimeout(()=>{
      this.loadingMap = true;
      if (this.loadingMap == true) {
        this.loadMap();
      }
    },3000);
  }

It worked for me perfectly!

caotuiit1997 on Apr 2, 2018

Hi!

I had the same problem when I tried to use ’ @ViewChild(‘searchInput’, {static: true}) public searchElementRef: ElementRef;’ and I wasted a lot of time looking for a solution, but the only problem there was that I had my input inside an ng-template, so when the page loaded it seemed that the content was hidden I could not render the element, based on my hypothesis I took the input to the main page of the HTML and boom! The error went away, but I did not stay there, I put the element inside a div and use ngIF and initialized it to false, and I had the error again, it seems that when starting the hidden element it does not recognize it, oh and by the way, If the content is hidden and then you show it and then try to call the function, it still doesn’t work, I hope my experience helps you.

erickroac on Aug 31, 2021

you should use ngAfterviewInit(){ } instead of timeout()

devangptechuz on Jul 2, 2020

I’m experiencing exactly the same issue,

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'nativeElement' of undefined TypeError: Cannot read property 'nativeElement' of undefined at LineChartComponent../src/common/base-chart.component.ts.BaseChartComponent.getContainerDims

Looks like if [view]=“undefined” , this.chartElement is undefined in getContainerDims of BaseChartComponent.

@swimlane/ngx-charts @5.3.1

Ionic Framework: 3.0.1 Ionic App Scripts: 1.3.0 Angular Core: 4.0.0 Angular Compiler CLI: 4.0.0 Node: 7.8.0 OS Platform: Linux 4.4 Navigator Platform: Linux x86_64

michal-th on Jun 28, 2017

I can’t for now reproduce the issue on plunker (I’m trying but i can’t get the same error). I don’t know why it isn’t working in my project but it’s working in the demo. It might be because my div’s structure is a bit complexe and I don’t know why in this line, chartElement seems to be undefined : var hostElem = this.chartElement.nativeElement; It’s like it cannot init this.chartElement.

The complete error is : capture d ecran 2017-05-10 a 09 46 14

If you have any idea where it could come from, I’m running out of ideas about the issue’s origin.

nethore on May 10, 2017