I'm currently in the process of learning how to utilize vue-chart.js and Chart.js. However, I've encountered an issue where the graph is not displaying on the main page.vue.
Below is the code snippet from ../src/Chart/RandomChart.vue:
<template>
<div>
<random-chart></random-chart>
</div>
</template>
<script>
import RandomChart from '../Chart/RandomChart.vue'
export default{
components:{
RandomChart
}
}
</script>
Here is the code from ..src/Chart/LineChart.js:
import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
export default {
extends: Line,
mixins: [reactiveProp],
props: ['options'],
mounted () {
// this.chartData is created within the mixin.
// If you want to pass options, create a local options object
this.renderChart(this.chartData, this.options)
}
}
And here is the code from RandomChart.vue, even though it's also documented in the official documentation:
<template>
<div class="small">
<line-chart :chart-data="datacollection"></line-chart>
<button @click="fillData()">Randomize</button>
</div>
</template>
<script>
import LineChart from './LineChart.js'
export default {
components: {
LineChart
},
data () {
return {
datacollection: null
}
},
mounted () {
this.fillData()
},
methods: {
fillData () {
this.datacollection = {
labels: [this.getRandomInt(), this.getRandomInt()],
datasets: [
{
label: 'Data One',
backgroundColor: '#f87979',
data: [this.getRandomInt(), this.getRandomInt()]
}, {
label: 'Data Two',
backgroundColor: '#f87979',
data: [this.getRandomInt(), this.getRandomInt()]
}
]
}
},
getRandomInt () {
return Math.floor(Math.random() * (50 - 5 + 1)) + 5
}
}
}
</script>
<style>
.small {
max-width: 600px;
margin: 150px auto;
}
</style>
Now, looking at the code from App.vue:
<template>
<div class="app">
<router-view></router-view>
</div>
</template>
<script>
export default{
}
</script>
<style scoped>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
Next, let's examine the main.js:
import { createApp } from 'vue'
import App from './App'
import router from "@/router/router";
const app = createApp(App)
app
.use(router)
.mount('#app');
Finally, here are the dependencies listed in the json file:
"dependencies": {
"chart.js": "^2.9.4",
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-chart-3": "^0.5.8",
"vue-chartjs": "^3.5.1",
"vue-router": "^4.0.11",
"vuex": "^4.0.0-0"
},
I have been troubleshooting for a while but can't seem to pinpoint the issue. It's possible that there's a minor mistake that I'm overlooking.