Параметр «масштабы» ломает график Chart.js

Я пытаюсь включить линейную диаграмму для некоторых данных о запасах в свой проект django, используя Chart.js. Я могу нормально отображать простую диаграмму с нужными мне данными, но когда я пытаюсь отформатировать ось X для даты и времени, диаграмма больше не отображается. Вот рабочая версия файла (client_small_market_view.html):

{% load static %}

<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
<div id = "container" class = "chartjs-wrapper">
    <canvas id = "stock-chart" class = "chartjs" style = "display: block;"></canvas>
</div>

<script>
    var dateFormat = 'YYYY-MM-DD';

    // the dates come ins as a list of strings formatted YYYY-MM-DD, so I use this function here to 
    // convert to Date
    function parseDate(date){
        var parts = date.split("-");
        return new Date(parts[0], parts[1] - 1, parts[2])
    };

    var config = {
        type: "line",
        data: {
            labels: {{ market_data.1|safe }}.map(dateString =>parseDate(dateString)),
            datasets: [
                {
                    label: "{{ market_data.0.0.0|safe }}",
                    data: {{ market_data.0.1.0|safe }},
                    fill: false,
                },
            ],
        },
        options:{
            title:{
                text: 'Market',
                display: true
            },
        }
    };

    var ctx = document.getElementById('stock-chart');
    var chart = new Chart(ctx, config);

</script>

И вот график, который он выдает на моем конце.

Однако добавление опции «масштабы» для форматирования меток оси x, как здесь

{% load static %}

<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
<div id = "container" class = "chartjs-wrapper">
    <canvas id = "stock-chart" class = "chartjs" style = "display: block;"></canvas>
</div>

<script>
    var dateFormat = 'YYYY-MM-DD';

    function parseDate(date){
        var parts = date.split("-");
        return new Date(parts[0], parts[1] - 1, parts[2])
    };

    var config = {
        type: "line",
        data: {
            labels: {{ market_data.1|safe }}.map(dateString =>parseDate(dateString)),
            datasets: [
                {
                    label: "{{ market_data.0.0.0|safe }}",
                    data: {{ market_data.0.1.0|safe }},
                    fill: false,
                },
            ],
        },
        options: {
            title:{
                text: 'Market',
                display: true
            }
            // when I take 'scales' out the chart renders fine,
            // but I need it to format the x-axis dates
            scales: {
                xAxes: [{
                    type: 'time',
                    time: {
                        parser: 'YYYY-MM-DD',
                        unit: 'day',
                        displayFormats: {
                            'day': 'YYYY-MM-DD'
                        }
                    },
                    ticks: {
                        source: 'data'
                    }
                }]                    
            }
        }
    };

    var ctx = document.getElementById('stock-chart');
    var chart = new Chart(ctx, config);

</script>

оставляет меня с чистым холстом. Я потратил часы и часы, пытаясь понять, в чем проблема, но не могу понять. Для справки, этот HTML-документ включен в родительский документ, который служит домашней страницей для приложения:

{% include './client_navbar.html'%}
{% include './client_small_market_view.html' with market_data=market_data%}
{% include './client_portfolios_summary_view.html' with portfolioss=portfolios %}

Кроме того, я также использую Bootstrap 4.4.1, но не могу представить, что это причина проблемы. Любые советы будут очень признательны!