Диаграмма исчезает после того, как я ее уничтожил, а затем перезагрузил

Question

У меня есть 2 диаграммы в моем приложении Angular Spring boot, первое работает отлично. У меня разные наборы данных каждый раз, когда диаграмма перезагружается с новым набором данных, сначала у меня возникали проблемы с графиком, когда он переключался на следующий набор данных и при наведении курсора значение меняется на старое, но я исправляю его, используя

this.chartdef.destroy();
this.reloadchart();

это для первого графика, и он работает просто отлично, как я сказал.

Я пытался сделать то же самое для второго графика, но каждый раз, когда я звоню этими методами график полностью исчезает

Вот мой код

 constructor(private produitservice:ProduitService) {

    this.interval = setInterval(() => {
      // this.pushdata();
      this.prodname=this.produitlist[this.pointer];
      console.log(this.prodname);
      this.produitservice.getdisPoste().subscribe(data2=>{
        this.poste=data2;
        this.poste.forEach(post=>{
          this.produitservice.gettopdefaut(this.produitlist[this.pointer],post,this.datelist[this.pointerdate]).subscribe(top=>{
            this.def=top;
            this.def.forEach(tt=>{
              this.defaut=tt;
              if (this.i==0){this.top1.push(this.defaut.nb_def);}
              else if(this.i==1){ this.top2.push(this.defaut.nb_def);}
              else if(this.i==2){this.top3.push(this.defaut.nb_def);}
              if(this.i==2){this.i=0;}else this.i++;
//console.log(i);

            });
        /*    console.log(this.top1+" top1 "+post);
            console.log(this.top2+" top2 "+post);
            console.log(this.top3+" top3 "+post);*/
             //if(this.chartdef) this.chartdef.destroy();
            this.chartdef.destroy();
            this.reloadchart();
            //this.defaut=top;
            // top.foreach(def=>{this.defaut=def;console.log(this.defaut.nb_def);});
            // console.log(this.defaut);
          })})
      });
      this.top3=[];
      this.top2=[];
      this.top1=[];
      this.poste=[];
      this.pointer++;

      if (this.pointer == this.produitlist.length) { this.pointer = 0 }

      //this.reloadchart();
    }, 10000);
}

reloadchart() {
    // @ts-ignore
    this.chartdef= new Chart('defauts',
      {
        type:'bar',

        options:{
          cutoutPercentage:40,
          responsive :true,

          title:{
            display:true,
            text:'Top 3 générateurs des défauts',

          },
          plugins:{
            datalabels:{
              align: 'end',
              anchor: 'end',
              display: 'true',
              color:'#ffffff',
              textAlign:'center',
              formatter: function(value, context) {
                return context.dataset.label+'\n'+ value;
              }
            }
          },
                  },
        data:{
          labels:this.poste,
          datasets:[
            {
              label:'REPERTOP01',
              data:this.top1,
              backgroundColor:'rgba(255, 0, 0,1)',
              borderColor:'rgba(255, 0, 0,0.6)',
              borderWidth:1,
              fill:false,
            },
            {
              label:'REPERTOP02',
              data:this.top2,
              backgroundColor:'rgba(255, 102, 0,1)',
              borderColor:'rgba(255, 102, 0,0.6)',
              fill:false,
              borderWidth:1,
            },
            {
              label:'REPERTOP02',
              data:this.top3,
              backgroundColor:'rgba(255, 225, 0,1)',
              borderColor:'rgba(255, 225, 0,0.6)',
              fill:false,
              borderWidth:1
            }
          ],
        }
      });
  }

Я использую chartJs с angular7 - как я могу это исправить?