title: Chart disappear when switching to another segment in ionic, how to solve this issue?
body: <p>Chart disappear when switching to another segment in ionic, how to solve this issue? I am new in ionic</p>
  
  <p>When I open this page it showing normal chart but when I change segment and return back, chart become invisible, please solve this issue<br>
  <strong>This is my HTML code</strong></p>
  
  <pre><code>&lt;ion-header&gt;
    &lt;ion-navbar  color="darkblue"&gt;
      &lt;ion-title class = "header"&gt;Lead&lt;/ion-title&gt;
    &lt;/ion-navbar&gt;
  
    &lt;ion-toolbar no-border-top color="primary"&gt;
      &lt;ion-segment [(ngModel)]="target" color="white"&gt;
          &lt;ion-segment-button value="report"&gt;
              Report
          &lt;/ion-segment-button&gt;
          &lt;ion-segment-button value="graph"&gt;
              Graph
          &lt;/ion-segment-button&gt;
      &lt;/ion-segment&gt;
    &lt;/ion-toolbar&gt;
  &lt;/ion-header&gt;
  
  &lt;ion-content&gt;
      &lt;div [ngSwitch]="target"&gt;
  
              &lt;div *ngSwitchCase = "'report'" &gt;
          &lt;ion-card padding-top=10px&gt;
            &lt;ion-card-header&gt;
                Bar Chart
            &lt;/ion-card-header&gt;
                  &lt;ion-card-content&gt;
                      &lt;canvas #barCanvas&gt;&lt;/canvas&gt;
                  &lt;/ion-card-content&gt;
          &lt;/ion-card&gt;
              &lt;/div&gt;
  
  
        &lt;div *ngSwitchCase = "'graph'" &gt;
          &lt;ion-card padding-top=10px&gt;
          &lt;ion-card-header&gt;Report&lt;/ion-card-header&gt;
          &lt;ion-card-content&gt;
  
          &lt;/ion-card-content&gt;
        &lt;/ion-card&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p><strong>This is my typescript code</strong></p>
  
  <p>This is my typescript where I implemented all chart details.</p>
  
  <pre><code>import { Component, ViewChild } from '@angular/core';
  import { Chart } from 'chart.js';
  
  @Component({
      templateUrl: 'mytarget.html'
  })
  
  export class MyTarget {
      @ViewChild('barCanvas') barCanvas;
  
      barChart: any;
      target: any;
  
      constructor() {
          this.target = "report";
      }
  
      ionViewDidLoad() {
  
          this.barChart = new Chart(this.barCanvas.nativeElement, {
  
              type: 'bar',
              data: {
                  labels: ["Target", "Achieved"],
                  datasets: [{
                      label: ' of Students',
                      data: [10, 8],
                      backgroundColor: [
                          // 'rgba(255, 99, 132, 0.2)',
                          // 'rgba(54, 162, 235, 0.2)'
                          'rgba(255,0,0,0.3)',
                          'rgba(0,255,0,0.3)'
                      ],
                      borderColor: [
                          'rgba(255,99,132,1)',
                          'rgba(54, 162, 235, 1)'
                      ],
                      borderWidth: 1
                  }]
              },
              options: {
                  responsive: false,
  
                  scales: {
                      yAxes: [{
                          ticks: {
                              beginAtZero: true
                          }
                      }]
                  }
              }
  
          });
      }
  }
  </code></pre>