Trying to implement plots in a modal with ionic/typescript, but plots do not show

Question

I have a base screen view which lists out all the voice recording from the user. When the user clicks on one, I made a custom modal which opens up and shows the user a plot o the amplitude and frequency o the recording as part o voice analysis. However, the plots are not showing. I've tried ng-echarts, ng2-charts and ngx.charts, and followed the instruction from this site: https://ionicthemes.com/tutorials/how-to-build-any-ionic-chart-or-visualization

However, this does not go into plotting in modals, and I'm just curious I I have to do anything additional or these charts to work in a modal. The modal typescript is attached or my latest attempt with chart.js

import { Chart } from "chart.js";
import { Observable } from 'rxjs';

@Component({
  selector: 'app-analyze-modal',
  templateUrl: './analyze-modal.page.html',
  styleUrls: ['./analyze-modal.page.scss'],
})
export class AnalyzeModalPage implements OnInit {

  @Input() audioData: Observable<any[]>;
  @Input() inputData: any;
  data: Observable<any[]>;

  @ViewChild('valueBarsCanvas') valueBarsCanvas;
  valueBarsChart: any;

  chartData = null;

  constructor() { 
  }

 
  ionViewDidLoad(){
   
  }
  playAudio(){

  }
  
  apmlitudeChart: Chart;

  ngOnInit() {
      this.apmlitudeChart = new Chart('amplitudeChart', {
        type: 'bar',
        data: {
          labels: ['1', '2', '3', '4', '5', '6', '7'],
          datasets: [
            {
              label: 'AMPLITUDE',
              data: [43, 53, 46, 34, 65, 34, 98],
              backgroundColor: '#47ECBB',

            }
          ]
        },
        options: {
          scales: {
            
          }
        }
      });
  }
  
openChart(){
  var canvas = <HTMLCanvasElement>document.getElementById("amplitudeChart");
  let canvasClone = this.cloneCanvas(canvas);
  var myWindow = window.open("about:blank", "myWindow", "height=600,width=600");
  myWindow.document.body.appendChild(canvasClone);
}

cloneCanvas(oldCanvas) {

    //create a new canvas
    var newCanvas = document.createElement('canvas');
    var context = newCanvas.getContext('2d');

    //set dimensions
    newCanvas.width = oldCanvas.width;
    newCanvas.height = oldCanvas.height;

    //apply the old canvas to the new one
    context.drawImage(oldCanvas, 0, 0);

    //return the new canvas
    return newCanvas;
}
}

As well as the HTML page:

  <ion-toolbar>
    <ion-title>Sound Analysis</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

<div>
  <canvas id="apmlitudeChart" #amplitudeChart>{{apmlitudeChart}}
  </canvas>

</div>
  
 
</ion-content>

I know that the modal page works, because that opens up one when I click on a recording on the home page, but I can't quite understand why the charts won't show.

Any help would be greatly appreciated.