Why can’t I put two charts on the same page Chart.Js and dynamically update the data

I have put 2 charts on the same page (Bar Chart and Line Chart) and I am dynamically changing the data. Both charts show up, but only the one at the top gets updated. I can’t figure out why this happens. It’s nothing wrong with the data or the charts truly, if I am to change the order of the charts it’s still the same thing. The one put on top on the page gets updated and the second one stays blank.

They are bout using different datasets.

I am using Angular and Chart.Js with BaseChartDirective from ng2-charts.

This is the code.

Imports

import { Chart, ChartConfiguration, ChartData, ChartEvent, ChartType } from 'chart.js';
import { BaseChartDirective } from 'ng2-charts';

Line Chart

public lineChartData: ChartConfiguration['data'] = {
    datasets: [
      {
        data: this.line_array1,
        label: 'Series A',
        backgroundColor: '#FFB1C1',
        borderColor: '#FFB1C1',
        pointBackgroundColor: 'rgba(148,159,177,1)',
        pointBorderColor: '#fff',
        pointHoverBackgroundColor: '#fff',
        pointHoverBorderColor: 'rgba(148,159,177,0.8)',
      },
      {
        data: this.line_array2,
        label: 'Series B',
        backgroundColor: '#9BD0F5',
        borderColor: '#9BD0F5',
        pointBackgroundColor: 'rgba(77,83,96,1)',
        pointBorderColor: '#fff',
        pointHoverBackgroundColor: '#fff',
        pointHoverBorderColor: 'rgba(77,83,96,1)',
      },

    ],
    labels: this.line_labels
  };

  public lineChartOptions: ChartConfiguration['options'] = {
    elements: {
      line: {
        tension: 0,
      },
    },
    scales: {
      // We use this empty structure as a placeholder for dynamic theming.
      y: {
        position: 'left',
      },
      x:{
        grid:{
            display: false,
        }
      },
      y1: {
        position: 'right',
        grid: {
          color: 'rgba(255,0,0,0.3)',
          display: false
        },
        ticks: {
          color: 'red',
        },
      },
    },

    plugins: {
      legend: { display: false},
      datalabels: {
          display: false
        },
    },
  };

  public lineChartType: ChartType = 'line';

  @ViewChild(BaseChartDirective) line: BaseChartDirective | undefined;


public chartHovered({
    event,
    active,
  }: {
    event?: ChartEvent;
    active?: object[];
  }): void {
    console.log(event, active);
  }

Bar Chart

@ViewChild(BaseChartDirective) bar: BaseChartDirective | undefined;

public barChartOptions: ChartConfiguration['options'] = {
  responsive: true,
  scales: {
    x: {
        grid: {
display: false
        }
    },
    y: {
      min: 0,
      grid: {
        display: false
                }
    },
  },
  plugins: {
    legend: {
      display: false,
    },
    datalabels: {
        display: false
      },
  },
};
public barChartType: ChartType = 'bar';
public barChartPlugins = [DataLabelsPlugin];

public barChartData: ChartData<'bar'> = {
    labels: this.bar_labels,
     datasets: [
    { data: this.bar_array1},
    { data: this.bar_array2 },
  ],
};

The HTML is like this

<mat-tab-group>
<mat-tab label="Charts">
 <br>
 <br>
 <canvas
   baseChart
   class="chart"
   [data]="barChartData"
   [options]="barChartOptions"
   [plugins]="barChartPlugins"
   [type]="barChartType"></canvas>
 <br>
</mat-tab>

<mat-tab label="Line">
   <br>
   <br>
<canvas
   baseChart
   class="chart"
   [data]="lineChartData"
   [options]="lineChartOptions"
   [type]="lineChartType"></canvas>
</mat-tab>
</mat-tab-group>

Since on the page the bar chart is first that’s the one that gets updated dynamically. If I was to change and put the line chart at the top that would be the one getting updated.

The thing is that if I have the Mat-Tab for the line chart selected “as I said the chart won’t dynamically update” and navigate to another tab then go back to the line chart tab, the chart then updates.