Chart.js中的折线图将鼠标悬停在图表上时，会在不同数据集之间不断闪烁

Question

我在我的角度5中使用了一个折线图，可以完美呈现。我使用了一个下拉列表，该下拉列表填充数据集并更改图表。它也可以正常工作，但是当图表发生变化并且我将鼠标悬停在图表的某些部分时，图表会变回先前的数据集。我的查看代码：

<mat-card>
  <mat-form-field class="col-md-3 float-right" >
    <mat-select placeholder="Report as per:" [(value)]="default_select">
      <mat-option (click)="AllReport()" value="0">
        All
      </mat-option>
      <mat-option (click)="weeklyReport()"  value="7">
        Weekly
      </mat-option>
      <mat-option (click)="thirtyDayReport()" value="30">
        30 Days
      </mat-option>
      <mat-option (click)="monthlyReport()" value="31">
        This Month
      </mat-option>
      <mat-option (click)="firstQuarterReport()" value="92">
        First Quarter
      </mat-option>
      <mat-option (click)="secondQuarterReport()" value="192">
        Second Quarter
      </mat-option>
      <mat-option (click)="thirdQuarterReport()" value="292">
        Third Quarter
      </mat-option>
      <mat-option (click)="fourthQuarterReport()" value="392">
        Fourth Quarter
      </mat-option>
    </mat-select>
  </mat-form-field>


    <mat-card-title>
      <span class="card-title">Check-in Report</span>
    </mat-card-title>
          <div *ngIf="chart" class="chart-container" style="position: relative; height:40vh; width:80vw">
            <canvas id="canvas"> {{chart}}</canvas>
          </div>
</mat-card>

我的TS代码：

    populateData(res) {
    this.chartData = res;
    const no_of_appointment =  this.chartData.map(data => data.no_of_appointment);
    const no_of_checkin =  this.chartData.map(data => data.no_of_checkin);
    const date =  this.chartData.map(data => data.date);
    console.log('THIS IS THE CHART DATA', date);

    this.chart = new Chart('canvas', {
      type: 'line',
      data: {
        labels: date,
        datasets: [
          {
            data: no_of_checkin,
            borderColor: '#e83e8c',
            fill: true,
            backgroundColor : '#FFE5EC',
            label: 'No. of checkin',
            strokeColor : '#87D1F1',
            intersect: true,
          },
          {
            data: no_of_appointment,
            borderColor: '#87D1F1',
            fill: true,
            fillColor : '#e83e8c',
            strokeColor : '#87D1F1',
            label: 'No. of appointment',
            intersect: true,
          }
        ]
      },
      options: {
        maintainAspectRatio: false,
        title: {
          display: true,
          text: 'Visitors Count'
        },
        layout: {
          padding: {
            left: 0,
            right: 0,
            top: 0,
            bottom: 20
          }
        },
        legend: {
          display: true
        },
        tooltips: {
          mode: 'index',
          intersect: false,
          position: 'nearest'
        },
        scales: {
          xAxes: [{
            display: true
          }],
          yAxes: [{
            display: true,
            ticks: {
               beginAtZero: true,
              userCallback: function (label, index, labels) {
                // when the floored value is the same as the value we have a whole number
                if (Math.floor(label) === label) {
                  return label;
                }

              },
            }
          }],
        }
      }
    });
  }

  weeklyReport() {
    this.appService.getWeeklyVisitData().subscribe( res => {
      this.populateData(res);
    });
    }

  thirtyDayReport() {
    this.appService.getThirtyDayVisitData().subscribe( res => {
      this.populateData(res);
    });
    }

  monthlyReport() {
    this.appService.getMonthlyVisitData().subscribe( res => {
      this.populateData(res);
    });
    }

  firstQuarterReport() {
    this.appService.getFirstQuarterVisitData().subscribe( res => {
      this.populateData(res);
    });
    }

  secondQuarterReport() {
    this.appService.getSecondQuarterVisitData().subscribe( res => {
      this.populateData(res);
    });
  }

  thirdQuarterReport() {
    this.appService.getThirdQuarterVisitData().subscribe( res => {
      this.populateData(res);
    });
  }

  fourthQuarterReport() {
    this.appService.getFourthQuarterVisitData().subscribe( res => {
      this.populateData(res);
    });
  }

    AllReport() {
      this.appService.getDailyVisitData().subscribe( res => {
      this.populateData(res);
    });

我的图表：

我的图表在悬停时（更改数据）：