angular – Ng2-Charts consumiendo datos de API

Estoy haciendo una aplicación web en Angular 11 consumiendo los datos de una API externa para luego mostrarlos en un grafico y para eso estoy usando chartjs ng2-charts. El consumo de la api esta perfecto, me muestra los datos en consola y todo, el grafico inicia pero no me muestra nada, aparece completamente vacio. Estoy aprendiendo angular y todavia no entiendo muy bien todo.

Este es mi grafico.component.ts:

import { Component, OnInit } from '@angular/core';

//import { HttpClient } from '@angular/common/https';
import { HttpErrorResponse } from '@angular/common/http';

import { CovidService } from '../../services/covid.service';

@Component({
  selector: 'app-grafico',
  templateUrl: './grafico.component.html',
  styleUrls: ('./grafico.component.css')
})
export class GraficoComponent {
    
    constructor (private covid: CovidService) { }

    // CHART OPCIONES 
    pieChartOptions = {
        responsive: true
    }

    pieChartLabels =  ('Muertes', 'Recuperados', 'Infectados');
  
    // CHART COLOR
    pieChartColor:any = (
        {
            backgroundColor: ('rgba(30, 169, 224, 0.8)',
            'rgba(255,165,0,0.9)',
            'rgba(139, 136, 136, 0.9)',
            )
        }
    )

    pieChartData:any = (
        { 
            data: ()
        }
    );
  
    ngOnInit () {
        this.covid.covidApi().subscribe(
            data => {
               /*const result = res.location.timelines;
                 const {deaths, confirmed, recovered} = result;*/
              const muertes = data.location.timelines.deaths.timeline;
              const recuperados = data.location.timelines.recovered.timeline;
              const confirmados = data.location.timelines.confirmed.timeline;
              console.log(muertes);
                this.pieChartData = muertes, recuperados, confirmados as any ();     // Introduzco datos de API en el grafico
            },
            (err: HttpErrorResponse) => {
                console.log (err.message);
            }
        );
    }

    onChartClick(event) {
        console.log(event);
    }
}

Este es mi servicio:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class CovidService {

  constructor(private _http: HttpClient) { }

  covidApi(){
    const urlApi = 'https://coronavirus-tracker-api.herokuapp.com/v2/locations/6'; // URL a API
    return this._http.get(urlApi).pipe(map((response: any) => response)); //Recorro datos con map 
  }
}

Esto es lo que me muestra en pantalla:
introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

No sé donde está el error, si me pueden ayudar se los agradecería. Saludos.