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