Chart.js datalabels plugin isn't showing on chart

Question

I have a bar chart from chart.js but I can't get the chart.js datalabels plugin to show the values of each bar within the chart.

Here is the chart.js code...the labels and data within chart.js is pulling from an external google sheet via a simple php array.

The chart.js library is referenced in my header, followed by the chart.js datalabels plugin library:

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>    


<canvas height="225vh" id="yield-comparison-bar-chart"></canvas>


<script type="text/javascript">
    new Chart(document.getElementById("yield-comparison-bar-chart"), {
        type: 'bar',
        data: {
          labels: [
          '<?php echo $holdings_array[29][3]; ?>', 
          '<?php echo $holdings_array[29][4]; ?>', 
          '<?php echo $holdings_array[29][5]; ?>', 
          '<?php echo $holdings_array[29][6]; ?>', 
          '<?php echo $holdings_array[29][7]; ?>', 
          '<?php echo $holdings_array[29][8]; ?>', 
          '<?php echo $holdings_array[29][9]; ?>',
          ],
          datasets: [
            {
              label: "Distribution Yield (%)",
              backgroundColor: ["#003b5c", "#b0ced8","#b0ced8","#b0ced8","#b0ced8","#b0ced8","#b0ced8"],
              data: [
                   <?php echo number_format(floatval($holdings_array[30][3]),2); ?>,
                   <?php echo number_format(floatval($holdings_array[30][4]),2); ?>,
                   <?php echo number_format(floatval($holdings_array[30][5]),2); ?>,
                   <?php echo number_format(floatval($holdings_array[30][6]),2); ?>,
                   <?php echo number_format(floatval($holdings_array[30][7]),2); ?>,
                   <?php echo number_format(floatval($holdings_array[30][8]),2); ?>,
                   <?php echo number_format(floatval($holdings_array[30][9]),2); ?>,]
            }
          ]
        },
        options: {
          legend: { display: false },
          title: {
            display: false,
            text: ''
          },
          plugins: {
          datalabels: {
             display: true,
             color: '#333',
             align: 'center',
             anchor: 'center'
          }
       },
          scales: {
                yAxes: [{
                    ticks: {
                        // Include a % sign in the ticks
                        callback: function(value, index, values) {
                            return value + '%';
                           
                        },
                    gridLines: {
                        display: false,
                        drawBorder: false,
    
                    },    
                    }
                }],
                xAxes: [{
                    gridLines: {
                        display: false,
                        drawBorder: false,
    
                    },    
                }]
            } 
        }
    });
    </script>

I would like for the values of each bar to be shown on top them please