Angular + HighCharts "ERROR TypeError: Cannot read properties of undefined ('xxxx') " but showing correct info

Question

I have a dashboard with charts (Highcharts) in Angular. I can access to the data base with a PHP file, but I am getting an error when I inspect the result. If I return a result in stocks() accessing to an Array, the data shows a chart correctly but with the following error after inspect:

Angular error showing chart correctly

If I return a result in stocks() not accessing to an Array there are no errors, but no info in the final chart

I would like to get chart with correct info but without the error of the image.

This is the interface:

export class Aeropuerto {
    name: string;
    data?: [];
    color?: string;
    visible: string;
}

Here is component.ts

stockChart  = [];

constructor(private dashboardService: DashboardService,private http:HttpClient ){}

 ngOnInit() {
    this.stockChart = this.stocks();
  };


  stocks() {
    return[
      
      this.getStock()[0].xxx //in this way shows chart with correct info but I get the error in the image.
                             //xxx can be changed for any value and the chart shows correct data
      
    //**this.getStock()    in this way show chart without info, and I get no error**
    ]
  }
  getStock(){
    return this.dashboardService.stockCharts().subscribe(
          stockChart => {
           this.stockChart = stockChart; 
          }
    )         
  }

And service.ts

@Injectable({
  providedIn: 'root'
})

export class DashboardService {
  apiURL = `http://phpFile.php`;



  constructor(private http: HttpClient) { }

  stockCharts(): Observable<Aeropuerto[]> {
    return this.http.get<Aeropuerto[]>(this.apiURL);
  }

And finally the html where the chart template (stock) get the data:

<app-widget-stock  [data]="stockChart"></app-widget-stock>

Edit: you can see the error in console in the following link