html container not found at createChild in amCharts Angular

Question

In here when i am in the same page it loads the chart.But when i click another page and again come to this page chart is not loading and it shows like html container not found at createChild

But if i again reload the same page chart will appear.

This is my component.ts file.

constructor( private zone: NgZone) {
}

ngOnInit() {
    this.zone.runOutsideAngular(() => {

          this.drawingChart();
    });
  }

drawingChart() {
    am4core.useTheme(am4themesAnimated);
    const container = am4core.create('div1', am4core.Container);
    container.width = am4core.percent(100);
    container.height = am4core.percent(100);
    const chart = container.createChild(am4charts.XYChart);
    chart.padding(0, 0, 0, 0);

    chart.data = [
      {
        date: '2012-07-27',
        value: 13
      },   {
        date: '2012-12-28',
        value: 50
      }, {
        date: '2012-12-29',
        value: 51
      }, {
        date: '2013-01-30',
        value: 81
      }];
    chart.colors.list = [
      am4core.color('rgba(4, 69, 142, 1)'),
    ];

    const dateAxis = chart.xAxes.push(new am4charts.DateAxis());
    const valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

    valueAxis.renderer.grid.template.disabled = true;
    valueAxis.renderer.labels.template.disabled = true;
    dateAxis.renderer.grid.template.disabled = true;
    dateAxis.renderer.labels.template.disabled = true;

    const series = chart.series.push(new am4charts.LineSeries());
    series.dataFields.valueY = 'value';
    series.dataFields.dateX = 'date';
    series.tooltipText = '{value';
    series.fillOpacity = 1;
    series.strokeWidth = 2;
    series.minBulletDistance = 15;
  }

This is my html file

<div class="col-10 col-sm-3-2 col-md-3-2 col-lg-7-6">
  <div class="l-content-wrapper ">
    <div class="a-title">
      <div class="a-title-content">
        <div class="a-title-content-main">Chart</div>
      </div>
    </div>
    <div id="div1" class="graph_area graph_area__500">
    </div>
  </div>
</div>

I could n't find the reason here

Minal Shah · Answer 1 · 2020-08-12T13:28:21.900

1

When you code in ngOnInit() gets executed, till that time your html is not rendered, so when you want to access the div1, it gets undefined.

So try to move your code in ngAfterViewInit(). This should probably resolve your issue. And if not you can try adding some timeout in that, so that till that time your div gets rendered.

Please refer the following code:

        ngOnInit() {
           
          }
        ngAfterViewInit(){
           this.getDiv()
       }
    getDiv(){
      if(!this.div){
        this.div = document.getElementById("div1");
        if(!this.div){
setTimeout(()=>{
         this.getDiv()
          },200)
          return
         }} 
        this.drawingChart();
   }

edited Aug 12 '20 at 13:28

answered Aug 12 '20 at 12:43

Minal Shah

1,402
1
5
13

Why have you added this part in runOutsideAngular? – Minal Shah Aug 12 '20 at 13:16
try to direcly call this.drawingChart in ngAfterViewInit() – Minal Shah Aug 12 '20 at 13:17
Actually that thing also not working when i add timeout it delays & after that shows the error – Hans Aug 12 '20 at 13:19
`ngAfterViewInit() { this.cardCheckingsChart(); }` put like this no error – Hans Aug 12 '20 at 13:22
but at the first reload it does n't show the chart.Again reload it shows the chart – Hans Aug 12 '20 at 13:23
@Hans Please suggest if you found any work around for this issue.facing the same issue with amcharts loading while navigating to multiple pages. – Jay Oct 09 '20 at 13:56
@Jay if we didn't dispose the charts properly sometimes this error comes – Hans Oct 15 '20 at 12:53

score 1 · Answer 2 · answered May 03 '23 at 10:08

1

putting the charts code inside ngAfterViewInit solves the problem for me.

answered May 03 '23 at 10:08

Myms

11
2

score 0 · Answer 3 · edited Oct 21 '22 at 15:17

0

I was calling my chart creation logic in ngOnInit() and got the html container not found, but after moving the chart drawing logic to ngAfterViewInit(), chart started displaying.

edited Oct 21 '22 at 15:17

MojioMS

1,583
4
17
42

answered Oct 14 '22 at 13:57

Coder

1
1

html container not found at createChild in amCharts Angular

3 Answers3