Problem with Doughnut installation into vue3js script setup

40 views Asked by At

i've always same error on my code


<template>
    <div class="tw-relative tw-h-full tw-w-full">
        <canvas ref="chart"></canvas>
        <div
            class="tw-absolute tw-inset-0 tw-flex tw-items-center tw-justify-center"
        >
            <div class="tw-text-center">
                <p class="tw-text-xl tw-font-bold">{{ text }}</p>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, defineProps } from 'vue';
import { Doughnut } from 'vue-chartjs';

const props = defineProps(['data', 'options', 'text']);

let chart;
onMounted(() => {
    const ChartComponent = {
        extends: Doughnut,
        props: ['data', 'options'],
        mounted() {
            this.renderChart(this.data, this.options);
        },
    };
    chart = new ChartComponent({
        propsData: { data: props.data, options: props.options },
    }).$mount();
    chart.$el.parentNode.replaceChild(chart.$el, ref('chart'));
});
</script>

Here is my error: TypeError: ChartComponent is not a constructor

I will use Doughnut on my template and see that donut

0

There are 0 answers