I'm trying to use charts.js and always get an error: TypeError: Cannot read properties of undefined (reading 'props')" and I can't fix it, any idea why? I have already looked in the docs and in github issues and didn't find anything. thank you for the help, if you need more details let me know
vue.runtime.esm.js?c320:619 [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'props')"
found in
---> <ChartStats> at src/components/ChartStats.vue
<App> at src/App.vue
<Root>
warn @ vue.runtime.esm.js?c320:619
l
vue.runtime.esm.js?c320:1897 TypeError: Cannot read properties of undefined (reading 'props')
at normalizeProps (vue.runtime.esm.js?c320:1419:1)
LineChart.vue
<script>
import { Line } from 'chart.js'
export default {
extends: Line,
props: {
chartdata: {
type: Object,
default: null
},
options: {
type: Object,
default: null
}
},
mounted () {
this.renderChart(this.chartdata, this.options)
}
}
</script>
<style>
</style>
ChartStats.vue
<template>
<div class="small">
<line-chart :chartdata="datacollection" :options="options"></line-chart>
<button @click="fillData()">Randomize</button>
</div>
</template>
<script>
import LineChart from './LineChart.vue'
export default {
components: {
LineChart
},
data () {
return {
datacollection:{},
options : {}
}
},
mounted () {
this.fillData()
},
methods: {
fillData () {
this.datacollection = {
labels: [this.getRandomInt(), this.getRandomInt()],
datasets: [
{
label: 'Data One',
backgroundColor: '#f87979',
data: [this.getRandomInt(), this.getRandomInt()]
},
]
}
this.options = {
responsive: true,
maintainAspectRatio: false
}
},
getRandomInt () {
return Math.floor(Math.random() * (50 - 5 + 1)) + 5
}
}
}
</script>