Unable to display Chart.js doughnut chart

I am trying to create a doughnut chart with chart.js, Bootstrap 5 and Flask. I used some YouTube videos and Stackoverflow links as reference but my chart is not getting displayed.

I see a white blank area in the chart section. If I click on top of it, it gives me a prompt to save download.png but the image itself if blank/white. Can someone please advise where I am going wrong?

<!-- Description -->
<div class="container" style="width: 80%;">
<div class="row">
<div class="col-sm-6">
<canvas id="doughnutChart" width = "300" height = "300"></canvas>
<script>
var ctx = document.getElementByID("doughnutChart").getContext("2d");
var doughnutChart = new Chart(ctx, {
type: 'doughnut',
data:{
labels: {{ cntlabels | safe }},
datasets: [
{
label: "URL Types",
data: {{ cntvalues | safe }},
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)'
],
hoverOffset: 4
}
]
},
options: {
responsive: false
}
});
</script>
</div>
<div class="col-sm-6">
<p>Space for bar chart</p>
</div>
</div>
The Flask app is passing the necessary variables:
return render_template('dashboard.html', fname = first_name, cntlabels = count_labels, cntvalues = count_values)