I've used chart.js once a good while back for a little bit now and i'm trying to follow a video to get back into it on how to create a chart. I got stuck on the part where he's positioning the legend.

For some reason legend configuration doesn't work. Even when I add display: false, it doesn't budge from its original position. I've been looking for an error in my code to see if I just typed something wrong but I can't seem to find anything, can anyone help me with this?

Here's my code:

    <div class="container">
        <canvas id="myChart"></canvas>
    </div>

    <script>
        let myChart = document.getElementById('myChart').getContext('2d');
        let colorHex = ['#C0392B', '#884EA0', '#3498DB', '#138D75', '#F4D03F', '#34495E'];
        let labels = ['Boston', 'Worcester', 'Springfield', 'Lowell', 'Cambridge', 'New Bedfort']
        let percentages = [617594, 181045, 153060, 106519, 105162, 95072]

        let massPopChart = new Chart(myChart, {
            type:'pie', // bar, horizontalBar, pie, line, doughnut, radar, polarArea
            data:{
                labels: labels,
                datasets:[{
                    label: 'Skills',
                    data: percentages,
                    backgroundColor: colorHex,
                    hoverBorderWidth: 2,
                    hoverBorderColor: colorHex

                }]
            },
            options:{
              title: {
                display: true,
                text: 'Largest cities',
                fontSize: '25'
                },
                legend: {
                    display: false,
                     position:'bottom'
                }
            }
        });
    </script>
</body>