Graph Component not charting data (Chart.js)

Question

I am trying to implement a slider using graph.js one of my pages have two different bar graphs used sideways to look like sliders (readonly) with buttons. However the 2nd bar graph isn't charting the data. I have tried passing data in every manner. Also when I console.log data that I am passing into chart.js method I see the variable is populated its just chart.js fails to draw it.

Any help would be appreciated. Thank you.

This is the chart method that I am invoking in ngOnInit.

chartHumidity() {
    let htmlRef = this.elementRef.nativeElement.querySelector(`#canvasHumid`);
    this.chart = new Chart(htmlRef, {
      type: 'bar',
      data: {
        labels: ['Humidity Level'],
        datasets: [{
          label: 'Max Humidity',
          data: this.maxExpectedHumidity,
          backgroundColor: [
            'rgb(16,165,197)',
          ],
          borderColor: [
            'rgb(43, 202, 238)',
          ],        
          hoverBackgroundColor: [
            'lightblue',
          ],
        }
        ]

      },
      options: {
        indexAxis: 'y',
        maintainAspectRatio: false,
        scales: {
          
          x: {
            display: true,
            min: 0,
            max: 100, 
            stacked: false,
            grid: {
              display: true,
              drawBorder: true,
              borderWidth: 1,
              drawOnChartArea: false,
              color: 'gray',

            },
          },
          y: {
            display: false,
            stacked: true,
            grid: {
              display: false,
              drawBorder: false,
              borderWidth: 0.5,
              drawOnChartArea: false,
              borderColor: 'black',
              color: 'rgba(0, 0, 0, 0)',
            },
          },
          
        },
      },
    });
 
  }