izyim/resources/assets/vue/components/dashboard/elements/OrderStatusChartComponent.vue

<template>
    <div class="row">
        <div class="card card-transparent">
            <div class="card-body no-padding b-b">
                <loading-component  v-show="isLoading"></loading-component>
                <div class="row">
                    <div class="col">
                        <div class="row">
                            <div class="col">
                                <canvas :id="this.id"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import Chart from 'chart.js';
    export default {
        props: {
            'id': {
                type: String,
                required: true
            }
        },
        data() {
            return {
                isLoading: false,
                ordersStatus: []
            }
        },
        mounted() {
            {
                this.fetchData();
            }
        },

        methods: {
            fetchData() {
                this.isLoading = true;
                fetch(route('api.report.order.status')).then(response => response.json())
                    .then(response => {
                        this.ordersStatus = response;
                        //turn off loading animation
                        this.isLoading = false;
                        this.createChart(this.id, this.chartConfig());
                    })
                    .catch(error => console.log(error));
            },
            chartConfig() {
                let chartData = {
                    type: 'doughnut',
                    data: {
                        labels: ["Processing", "Receiving", "Shipping", "Completed"],
                        datasets: [{
                            data: this.ordersStatus,
                            backgroundColor: ['#f9dc6b', '#69b6f3', '#ea336b','#47b5ab'],
                            fill: 'transparent'
                        }]
                    },
                    options: {
                        cutoutPercentage: 60,
                        rotation: Math.PI,
                        circumference: Math.PI
                    }
                };

                return chartData;
            },
            createChart(chartId, chartData) {
                const ctx = document.getElementById(chartId);
                new Chart(ctx, {
                    type: chartData.type,
                    data: chartData.data,
                    options: chartData.options,
                });
            }
        }
    }
</script>