BarChart cannot be displayed [chart.js]

My Barchart is not displaying. This is my code :

{% extends "layout.html" %}
{% block content %}
<!--<div class="container">
    <canvas id="graph"></canvas>
</div>

<script>
    try {

        let graph = document.getElementById('graph').getContext('2d')

        let popularity_graph = new Chart(graph, {
            type: 'bar',
            labels = {{ names|safe }},
            datasets : [ 
                {
                    label: 'Magazines Sold',
                    data: {{ sold }}
                }
            ] 

        })

    } catch (error) {
        alert(error)
    }
</script> -->
<div class="container">
    <canvas id="myChart"></canvas>
</div>

<script>
    try{
        let myChart = document.getElementById('myChart').getContext('2d')

        let popularityChart = new Chart(myChart,{
            type:'bar',//bar,horizontalBar, pie, line, doughnut, radar, polarArea, scatter, bubble
            data:{
                labels:[ {{ names|safe }} ],
                datasets:[{
                    label: 'Magazines Sold'
                    data: [{{ sold|safe }}]
                }]
            },
            options:{}
        });  
    }catch(error){
        alert(error)
    }
</script>
{% endblock content %}

This is being extended from my layout page. This code will go into the body. Using script tags and CDN method, I have also downloaded chart.js in my layout page. This is my graph page. name and sold arebeing passed from the app.route created in routes.py

code from routes.py

@app.route('/graphs', methods=['GET','POST'])
def create_graphs():
magazines = Magazine.query.all()
names = [magazine.magazineName for magazine in magazines]
number_sold = [magazine.sold for magazine in magazines]

return render_template('graphs.html', names = names, sold = number_sold, len=len)