[Chartjs]-Native element not defined when ngSwitch condition in canvas element

by

0👍

you dont have to use ng-switch for each case.

It should be like so:

<div [ngSwitch]="category">
  <div *ngSwitchCase="'today'"> <!-- case 1 -->
    <canvas #yesterdayChart> </canvas>
  </div>
  <div *ngSwitchCase="'yesterday'">
    <canvas #todayChart></canvas> <!-- case 2 -->
  </div>
</div>

Add if conditions in the component since only one of these elements will be present in the DOM.

if(this.todayChart){
  this.heutechart = new Chart(this.todayChart.nativeElement, {
             type: 'line',
             data: {
                 xLabels: labels,
                 datasets: [
                     {
                         label: 'G.Oil', fill: true, lineTension: 0.1, backgroundColor: "rgba(75,192,192,0.4)", borderColor: "rgba(75,192,192,1)",
                         pointHoverBorderWidth: 2, pointRadius: 1, pointHitRadius: 10, data: datay, spanGaps: false,
                     }
                 ],

             },
         });
     });
  }
 //Similarly for yesterdayChart

Leave a comment