my javascript bar chart doesn’t come up on my index.html page

Heyy, I’ve been working on my web app project and I needed to do graph so I tried it separately in another file and it works so well but when I paste in the index.html it doesn’t I don’t know why

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.min.js"></script>
</script>
<canvas height="400" id="barChart" width="400"></canvas>
<script>
var data = {
    labels: ["AIs", "CS", "DSA", "ISM", "SE"],
        datasets: [{
            label: "2020 Intake",
            data: [0.69, 0.7, 0.68, 0.71, 0.74],
            backgroundColor: ["#fcedf5", "#fad7e9", "#fcbdde", "#ffb0d9", "#fc9acd"],
            borderColor: "#fff",
             borderWidth: 1
        },{
            label: "2021 Intake",
            data: [0.78, 0.67, 0.76, 0.71, 0.74],
            backgroundColor: ["#fcedf5", "#fad7e9", "#fcbdde", "#ffb0d9", "#fc9acd"],
            borderColor: "#fff",
            borderWidth: 1
        }]
    };
var ctx = document.getElementById("barChart").getContext("2d");
var myNewChart = new Chart(ctx, {
    type: 'bar',
    data: data,
        options: {
            indexAxis: 'y',
            scales: {
            x: {
                min: 0,
                max: 1,
                ticks: {
                callback: function(value) {
                return (value * 100) + "%";
                }}}}}
        });
</script>

Could you help me please