monthly-sales.blade.php

<div>

    <canvas id="myChart" width="750" height="500"></canvas>

</div>

@push('scripts')
    <script>
        let ctx = document.getElementById('myChart').getContext('2d');
        let myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['Duncan', 'Henderson', 'Hudson', 'Muller', 'Other', 'Walker'],
                datasets: [{
                    data: [9000, 59300, 26362.5, 9600, -1470, 9650],
                    backgroundColor: '#0F75BC',
                    borderColor: '#86c8f5',
                    borderWidth: 4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                legend: {
                    display: false
                },
                scales: {
                    xAxes: [{
                        gridLines: {
                            display: true,
                            color: '#39393A'
                        },
                        ticks: {
                            fontColor: '#FFFFFF',
                            fontSize: 16
                        }
                    }],
                    yAxes: [{
                        gridLines: {
                            display: true,
                            color: '#989898',
                            zeroLineColor: 'red',
                            zeroLineWidth: 4
                        },
                        ticks: {
                            fontColor: '#FFFFFF',
                            fontSize: 12,
                            beginAtZero: true
                        }
                    }],
                },
                plugins: {
                    datalabels: {
                        color: 'white',
                        font: {
                            size: 16,
                            weight: 'bold'
                        },
                        formatter: (value) => "$" + parseInt(value).toLocaleString()
                    }
                }
            }
        });
    </script>
@endpush