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

<template>
    <div class="row">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col">
                        <div class="row">
                            <loading-component  v-show="isLoading"></loading-component>
                            <div class="col">
                                <small class="fs-11 bold">CUSTOMERS</small>
                            </div>
                        </div>
                        <div class="row">
                            <canvas :id="this.id"></canvas>
                        </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,
                customer: []
            }
        },
        mounted() {
            {
                this.fetchData();
            }
        },
        methods: {
            fetchData() {
                this.isLoading = true;
                fetch(route('api.report.customer')).then(response => response.json())
                    .then(response => {
                        this.customer = response;
                        //turn off loading animation
                        this.isLoading = false;
                        this.createChart(this.id, this.chartConfig());
                    })
                    .catch(error => console.log(error));
            },
            chartConfig() {
                let chartData = {
                    type: 'pie',
                    data: {
                        labels: ["ACTIVE", "NON-ACTIVE"],
                        datasets: [{
                            label: "TOTAL CUSTOMER ON THE MONTH",
                            data: this.customer,
                            backgroundColor: ['#ea336b'],
                            fill: 'transparent'
                        }]
                    }
                };

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