Chart disappear when switching to another segment in ionic, how to solve this issue?

Question

Chart disappear when switching to another segment in ionic, how to solve this issue? I am new in ionic

When I open this page it showing normal chart but when I change segment and return back, chart become invisible, please solve this issue
This is my HTML code

<ion-header>
  <ion-navbar  color="darkblue">
    <ion-title class = "header">Lead</ion-title>
  </ion-navbar>

  <ion-toolbar no-border-top color="primary">
    <ion-segment [(ngModel)]="target" color="white">
        <ion-segment-button value="report">
            Report
        </ion-segment-button>
        <ion-segment-button value="graph">
            Graph
        </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

<ion-content>
    <div [ngSwitch]="target">

            <div *ngSwitchCase = "'report'" >
        <ion-card padding-top=10px>
          <ion-card-header>
              Bar Chart
          </ion-card-header>
                <ion-card-content>
                    <canvas #barCanvas></canvas>
                </ion-card-content>
        </ion-card>
            </div>


      <div *ngSwitchCase = "'graph'" >
        <ion-card padding-top=10px>
        <ion-card-header>Report</ion-card-header>
        <ion-card-content>

        </ion-card-content>
      </ion-card>
    </div>
  </div>
</ion-content>

This is my typescript code

This is my typescript where I implemented all chart details.

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
                        }
                    }]
                }
            }

        });
    }
}

Answer 1

In case you have not been able to resolve this issue, I had the same issue using ion-segment and I was able to resolve it by replacing ngSwitch with the [hidden] property.

The problem is that the canvas only get rendered once. The canvas is also lost once you switch between your segments, the only solution is to hide you segment when switching between segments

Edit the ion-content part of your HTML code to the one below and you should be okay

<ion-content>
  <div [hidden] = "target != 'report'" >
    <ion-card padding-top=10px>
      <ion-card-header>Bar Chart</ion-card-header>
        <ion-card-content>
          <canvas #barCanvas></canvas>
        </ion-card-content>
    </ion-card>
  </div>
  <div  [hidden] = "target != 'graph'" >
    <ion-card padding-top=10px>
    <ion-card-header>Report</ion-card-header>
    <ion-card-content>    </ion-card-content>      
  </div>
</ion-content>

That should solve the issue. However, I am not sure the [hidden] property is available on div, if not, remove div and place the [hidden] property in the ion-card

Answer 2

I fixed like below code for my APP Use Segment events and reload again while switching

 <ion-toolbar no-border-top color="primary">
    <ion-segment [(ngModel)]="type" (ionChange)="segmentChanged($event)">
      <ion-segment-button value="loan">
        Loan
      </ion-segment-button>
      <ion-segment-button value="claim">
        Claim
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>

And in you component

segmentChanged(ev: any) {
    if (ev._value != "claim") {
      setTimeout(() => {
        this.doughnutChart = this.getDoughnutChart();
        this.doughnutChart1 = this.getDoughnutChart1();
      }, 150);
    }
}