I'm currently working on a project that involves using vue-chartjs within the Laravel framework. I've encountered an issue where the data doesn't load upon initial page load. However, if I click on the Legend three times, the data eventually appears.
You can see the problem in action in this gif:
Here is my code:
<template>
<Chart :chartData="this.data" :width="800" :height="500"></Chart>
</template>
<script>
import Chart from './Chart.vue';
export default {
name: 'home',
components: {
Chart
},
data() {
return {
data: {},
weights: [],
dates: []
}
},
mounted () {
this.render()
},
methods: {
render() {
self = this
axios.get('/api/data')
.then(function (response) {
for (var i = 0; i < response.data.data.length; i++) {
self.weights.push(response.data.data[i].kg)
self.dates.push(response.data.data[i].created_at)
}
console.log(response)
})
.catch(function (error) {
console.error(error);
});
// Update base render method with actual data.
self.data = {
labels: self.dates,
datasets: [
{
label: 'Data One',
data: self.weights,
}
]
}
}
}
}
</script>
Chart.vue:
<script>
import VueCharts from 'vue-chartjs'
import { Bar, Line, mixins } from 'vue-chartjs'
import moment from 'moment'
import axios from 'axios'
export default {
extends: Bar,
mixins: [mixins.reactiveProp],
props: ['chartData', 'options'],
data() {
return {
}
},
mounted () {
this.renderChart(this.chartData, this.options)
},
methods: {
}
}
</script>