Django how to send array to javascript for dynamically display pie chart?

I have an array in Django views.py and I want to send it to HTML and display a 
    pie chart, but failed, I've tried many other methods and read many tutorials, in most 
    of the case, they have a field in models that store some number, and they display 
    those number. In my case, I need to calculate the subtotal of tasks that are in 
    different states. I'm not sure how to output those data to chart.js with proper labels 
    or any other piechart if there's any recommendation?

views.py

def visualisation(request, project_id):
    
    project = Project.objects.get(id=project_id)
   
    counts_data = Todo.objects.aggregate(
        to_do_count=Count('id', filter=Q(status='to_do')),
        in_progress_count=Count('id', filter=Q(status='in_progress')),
        done_count=Count('id', filter=Q(status='done'))
        )

    
        return render(request, 'todo_lists/progress.html', {"counts_data": counts_data})
'''

html

<script>
 
    $(document).ready(function() {
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: [1,2,3],
        
        datasets: [{
            label: '# of Votes',

            data:counts_data,
            
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        responsive:false
        
    }
    });
    });
    </script>
'''