Chartjs: How do you toggle the visibility of charts in Ionic 4

Question

I currently have 2 charts - 1 Pie and 1 Bar chart both done using ChartJS with Ionic 4/Angular. I want to make it so that when I click on a button, it will toggle between the 2 charts. Initially, when I click on the buttons to change, the graphs do switch. However, when I hover over the charts, the charts keep on appearing simultaneously (as if they are overlapping each other on the same canvas).

Here are my codes:

.html

<ion-content>
  <ion-list-header color="light">Vertical Bar Chart</ion-list-header>
  <ion-card class="welcome-card">
    <ion-card-header>
      <ion-card-subtitle>Number of Viewers per season for</ion-card-subtitle>
      <ion-card-title>Game of Thrones</ion-card-title>
    </ion-card-header>
    <ion-card-content>
        <canvas #barChart></canvas>
    </ion-card-content>
  </ion-card>

  <ion-grid>
    <ion-row>
      <ion-col style="text-align:center;">
        <ion-button (click)="viewBarChart()">Bar Chart</ion-button>
      </ion-col>
      <ion-col style="text-align:center;">
        <ion-button (click)="viewPieChart()">Pie Chart</ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

.ts file

createBarChart() {
    this.bars = new Chart(this.barChart.nativeElement, {
      type: 'bar',
      data: {
        labels: ['S1', 'S2', 'S3', 'S4', 'S5', 'S6', 'S7', 'S8'],
        datasets: [{
          label: 'Finished Tasks',
          data: [2.5, 3.8, 5, 6.9, 6.9, 7.5, 10, 17],
          backgroundColor: 'rgb(38, 194, 129)', // array should have same number of elements as number of dataset
          borderColor: 'rgb(38, 194, 129)',// array should have same number of elements as number of dataset
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    });
  }


viewPieChart(){
    this.bars = new Chart(this.barChart.nativeElement, {
      type: 'pie',
      data: {
        labels: ['Incomplete', 'In Progress', 'Finish', 'Overdue'],
        datasets: [{
          label: 'Number of Tasks',
          data: this.pieChartData,
        }]
      }
    });

    this.bars.update();
  }

viewBarChart(){
    this.bars = new Chart(this.barChart.nativeElement, {
      type: 'pie',
      data: {
        labels: ['Incomplete', 'In Progress', 'Finish', 'Overdue'],
        datasets: [{
          label: 'Number of Tasks',
          data: [14, 1, 9, 2],
          backgroundColor: 'rgb(38, 194, 129)',          
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    });

    this.bars.update();
  }

ionViewDidEnter(){
    this.createBarChart();
}

Answer 1

Add a function to remove any existing chart from the canvas:

destroyChart() {
 if(this.bars) {
    this.bars.destroy()
 }
}

Call this function right before any calls to new Chart

Also, maybe rename this.bars to this.currentChart

Seehttps://www.chartjs.org/docs/latest/developers/api.html#destroy