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

Question

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';

Edit

When a specific change happens the array is cleaned then the new data is pushed to an array.

Data

line_array1 = new Array();
line_array2 = new Array();
bar_array1 = new Array();
bar_array2 = new Array();

ngOnChanges(charters: SimpleChanges){

// Arrays get Cleaned first !

this.line_array1.push(xyz);
this.line_array2.push(xyz);
this.bar_array1.push(zyx);
this.bar_array2.push(zyx);

}

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.

Answer 1

In my opinion best solution is create different charts.html1 and chart2.html call them in the new page inside then will get the solution.