@model CostMakeUpForVehicle
<canvas id="pie-chart"></canvas>
<script>
    renderChart();
    function renderChart() {
        new Chart($("#pie-chart"), {
            type: 'pie',
            data: {
                labels: ["Planned Maintenance(Service Records)", "Unplanned Maintenance", "Tax", "Fuel"],
                datasets: [
                    {
                        label: "Expenses by Category",
                        backgroundColor: ["#003f5c", "#58508d", "#bc5090", "#ff6361"],
                        data: [
                            @Model.ServiceRecordSum, 
                            @Model.CollisionRecordSum, 
                            @Model.TaxRecordSum,
                            @Model.GasRecordSum
                        ]
                    }
                ]
            },
            options: {
                plugins: {
                    legend: {
                        position: "bottom",
                        labels: {
                            color: "#fff"
                        }
                    },
                    title: {
                        display: true,
                        text: "Expenses by Type",
                        color: "#fff"
                    },
                }
            }
        });
    }
</script>