html container not found at createChild in amCharts Angular

user_11751002 0
Viewed 2108

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 enter image description here

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

amcharts4 ngoninit angular
1 Answers

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();
   }
user_136138240
Related