how can i put a chart in a div with *ngIf

Issue

i'm new to chart.js but i managed to creatr a chart as i wanted it, now i tried to create two tab buttons so that i can show some tables when i press a tab button and the chart when i press the other tab button, to do this i use a *ngIf command, but when i try to do what i've just wrote i get an error:

Chart.js:9369 Failed to create chart: can't acquire context from the given item

... i don't understand why i get it since if i remove the ngIf and try to see all the content(the tables and the chart) i get no error... please see that in the chart i use the datas in the tables. i'm sorry if my english is not good but i can try to explain better in the comments here i paste the code of my html

     <div>
    <button class="tablink" style="float: left;" (click)="ana(false)">DATI TABELLARI</button>
    <button class="tablink" style="float: right;" (click)="ana(true)">GRAFICO</button>
</div>
<div *ngIf="showAna!=true && loading==false">
 TABLES
</div>
<div *ngIf="showAna==true && loading==false">
    CHART
    <div id="divCh">
        <canvas id="chart">
            {{chart}}
        </canvas>
    </div>
</div>

here is the ts file:

 async ngOnInit(): Promise<void> {
 HERE I GET THE DATAS THAT I NEED FOR MY TABLES AND THEN FOR THE CHART

 this.chart = new Chart('chart', {
  type: 'line',
  data: {
    labels: this.mesi,
    datasets: [{
      label: 'totale va ufficiali',
      data: this.totEffortva, 
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)'],
      borderColor: [
        'rgba(255, 99, 132, 1)'],
        borderCapStyle: 'butt',
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: 'miter',
        pointBorderColor: "white",
        pointBackgroundColor: "black",
        pointBorderWidth: 1,
        pointHoverRadius: 8,
        pointHoverBackgroundColor: "brown",
        pointHoverBorderColor: "yellow",
        pointHoverBorderWidth: 2,
        pointRadius: 4,
        pointHitRadius: 10,
    },{
      label: "totale giornate impegnate",
      fill: true,
      lineTension: 0.1,
      backgroundColor: "rgba(167,105,0,0.4)",
      borderColor: "rgb(167, 105, 0)",
      borderCapStyle: 'butt',
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: 'miter',
      pointBorderColor: "white",
      pointBackgroundColor: "black",
      pointBorderWidth: 1,
      pointHoverRadius: 8,
      pointHoverBackgroundColor: "brown",
      pointHoverBorderColor: "yellow",
      pointHoverBorderWidth: 2,
      pointRadius: 4,
      pointHitRadius: 10,
      // notice the gap in the data and the spanGaps: false
      data: this.totprog,
      spanGaps: false,
    }]
  },
  
  options: {
    responsive: true,
    plugins: {
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: 'Chart.js Line Chart'
      }
    }
  },

});
this.loading=false;
 }
  ana(show:boolean){
     this.showAna=show
 }

I repeat: if i don't use ngif for show what i want whit the buttons it works fine, if i use it i get the error

Chart.js:9369 Failed to create chart: can't acquire context from the given item

thank you

Solution

when ngOnInit() is called there is no canvas element in the DOM since *ngIf condition is false by default. What you need - move ChartJS initialization logic to another place (you can use another life hook method like ngAfterViewChecked to check if canvas element is rendered or not, or call this logic by user event) and only after that initialize ChartJS

as alternative, you can replace *ngIf with [class.hidden]="!showAna". Do not forget add .hidden { display: none } to css file

Answered By - icekson