<div class="card shadow-sm p-3 mb-4">
    <h6>Expense Breakdown</h6>
    <canvas id="expenseChart"></canvas>
</div>

<script>
fetch("{% url 'expense_breakdown_chart' %}")
.then(res => res.json())
.then(data => {
    new Chart(document.getElementById('expenseChart'), {
        type: 'bar',
        data: {
            labels: data.labels,
            datasets: [{
                label: 'Expenses',
                data: data.data
            }]
        }
    });
});
</script>