Multiple graphs lineCanvas in one page Ionic2

Ionic Framework ionic-v3
1

Hi,

I am trying to generate 3 graphs from type lineCanvas on the same page from charts.js

Error:

error_handler.js:54 EXCEPTION: Uncaught (in promise): TypeError: Cannot read property ‘nativeElement’ of undefined
TypeError: Cannot read property ‘nativeElement’ of undefined
at SafeSubscriber._next (http://localhost:8100/build/main.js:85782:118)
at SafeSubscriber.__tryOrSetError (http://localhost:8100/build/main.js:866:16)
at SafeSubscriber.next (http://localhost:8100/build/main.js:808:27)
at Subscriber._next (http://localhost:8100/build/main.js:759:26)
at Subscriber.next (http://localhost:8100/build/main.js:723:18)
at Observable._subscribe (http://localhost:8100/build/main.js:121234:26)
at Observable.subscribe (http://localhost:8100/build/main.js:275:27)
at http://localhost:8100/build/main.js:85773:39
at t.invoke (http://localhost:8100/build/polyfills.js:3:9655)
at Object.onInvoke (http://localhost:8100/build/main.js:38468:37)
at t.invoke (http://localhost:8100/build/polyfills.js:3:9606)
at e.run (http://localhost:8100/build/polyfills.js:3:7019)
at http://localhost:8100/build/polyfills.js:3:4661
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:10284)
at Object.onInvokeTask (http://localhost:8100/build/main.js:38459:37)

.html

<ion-content>
  <div class="marginGraph" *ngFor="let tag2 of Tags">
      <ion-card>
      <ion-card-content>
        <div>
           {{tag2.body.tag.nomedaTag}}
        </div>
        <div (click)='maisinfoTag();'>
          <canvas  #lineCanvas></canvas>
        </div>  
      </ion-card-content>
    </ion-card>
  </div>
</ion-content>

.ts

     this.lineChart = [];
        for (var i = 0; i <= 3; i++) {
          this.lineChart.push(new Chart(this.lineCanvas.nativeElement, {
            type: 'line',
            data: {
              labels: ["Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sabado", "Domingo"],
              datasets: [
                {
                  label: "test",
                  fill: false,
                  lineTension: 0.1,
                  backgroundColor: "rgba(75,192,192,0.4)",
                  borderColor: "rgba(75,192,192,1)",
                  borderCapStyle: 'butt',
                  borderDash: [],
                  borderDashOffset: 0.0,
                  borderJoinStyle: 'miter',
                  pointBorderColor: "rgba(75,192,192,1)",
                  pointBackgroundColor: "#fff",
                  pointBorderWidth: 1,
                  pointHoverRadius: 5,
                  pointHoverBackgroundColor: "rgba(75,192,192,1)",
                  pointHoverBorderColor: "rgba(220,220,220,1)",
                  pointHoverBorderWidth: 2,
                  pointRadius: 1,
                  pointHitRadius: 10,
                  data: [1, 2, 3, 4, 5, 6, 7],
                  spanGaps: false,
                }
              ]
            },
            options: {
              legend: {
                display: false
              },
              tooltips: {
                callbacks: {
                  label: function (tooltipItem) {
                    return tooltipItem.yLabel;
                  }
                }
              }
            }
          }));
        }