<div class="card shadow-sm p-3 mb-4">
    <h6>Income vs Expenses</h6>
    <canvas id="incomeChart"></canvas>
</div>

<script>
fetch("{% url 'income_vs_expense_chart' %}")
.then(res => res.json())
.then(data => {
    new Chart(document.getElementById('incomeChart'), {
        type: 'line',
        data: {
            labels: data.labels,
            datasets: [
                {
                    label: 'Income',
                    data: data.income,
                    borderWidth: 2
                },
                {
                    label: 'Expenses',
                    data: data.expenses,
                    borderWidth: 2
                }
            ]
        }
    });
});
</script>