html Container 'idchart' not found (Angular)-CodePudding

I created a pieChart of amcharts but I got this error html container 'chartdiv' not found

<div id="chartdiv"></div>

and here is the code for chart

  chartRender() {
    const chart = am4core.create('chartdiv', am4charts.PieChart);
    chart.svgContainer.autoResize = false;

    chart.data = [
      {
        "country": "UK",
        "litres": 99
      }, {
        "country": "Belgium",
        "litres": 60
      }, {
        "country": "The Netherlands",
        "litres": 50
      }, {
        "country": "The Netherlands",
        "litres": 50
      }]

    // Add and configure Series
    const pieSeries = chart.series.push(new am4charts.PieSeries());
    pieSeries.dataFields.value = 'litres';
    pieSeries.dataFields.category = 'country';
    pieSeries.slices.template.stroke = am4core.color('#fff');
    pieSeries.slices.template.strokeWidth = 2;
    pieSeries.slices.template.strokeOpacity = 1;
    pieSeries.labels.template.maxWidth = 130;
    pieSeries.labels.template.wrap = true;
    // This creates initial animation
    pieSeries.hiddenState.properties.opacity = 1;
    pieSeries.hiddenState.properties.endAngle = -90;
    pieSeries.hiddenState.properties.startAngle = -90;
  }

chartRender() is placed in ngAfterViewInit()

Thank for your help!

CodePudding user response：

Have you tried setting a viewChild of the element to ensure it is initialised, e.g:

Copied from JediManJS at https://github.com/amcharts/amcharts4/issues/1324

Hello. I got the same issue and found more elegant, than setTimeout function, way. In the template, I added templateVariable to div:
<div id="bar-lines-chart" style="width: 100%; height: 200px" #chartElement></div>
In the component, I made next:
@ViewChild('chartElement') chartElement: ElementRef<HTMLElement>;
and in am4core.create function:
const chart = am4core.create(this.chartElement.nativeElement, am4charts.XYChart);
Working well.