chart js give error as This method is not implemented: Check that a complete date adapter is provided

Question

I'm currently working on a project where I'm utilizing the Chart.js library to create an interactive line chart displaying historical price data over time. While attempting to set up the chart, I've run into an error that I haven't been able to resolve. The error message I'm encountering is as follows:

Error message:
chart.js:19 Uncaught Error: This method is not implemented: Check that a complete date adapter is provided.
    at Tn (chart.js:19:103030)
    at Ln.formats (chart.js:19:103248)
    at Wo.init (chart.js:19:153043)
    at chart.js:19:92454
    at u (chart.js:13:1237)
    at On.buildOrUpdateScales (chart.js:19:92179)
    at On._updateScales (chart.js:19:94913)
    at On.update (chart.js:19:94076)
    at new On (chart.js:19:90620)
    at loadChart (index.html:40:27)

my code:

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script type="text/javascript">
        function loadChart() {
            // Sample data for demonstration
            const generateRandomData = (count) => {
                const data = [];
                const currentDate =  Date.now();
                for (let i = 0; i < count; i++) {
                    data.push({
                        x: Date(currentDate - (count - i - 1) * 24 * 60 * 60 * 1000),
                        y: Math.random() * 1000
                    });
                }
                return data;
            };

            const dayData = generateRandomData(30);
            const previousMonthData = generateRandomData(30);

            const ctx = document.getElementById('line-chart').getContext('2d');

            const chart = new Chart(ctx, {
                type: 'line',
                data: {
                    datasets: [
                        {
                            label: 'Previous Month',
                            data: previousMonthData,
                            borderColor: 'blue',
                            fill: false
                        },
                        {
                            label: 'Current Month',
                            data: dayData,
                            borderColor: 'green',
                            fill: false
                        }
                    ]
                },
                options: {
                    scales: {
                        x: {
                            type: 'time',
                            time: {
                                unit: 'day'
                            },
                            title: {
                                display: true,
                                text: 'Date'
                            }
                        },
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: 'Price'
                            }
                        }
                    }
                }
            });
        }
        loadChart();
    </script>