For my clan project, Lords of War on the Supercell games, I am working on creating a chart to track current donations using chart.js. I am utilizing Vue for the front-end and vue-chartjs for the charts. However, I am facing an issue where the datasets are not visible when the page is initially opened. How can I resolve this problem?
Here is the chart data object:
donation_chart_data: {
labels: [],
datasets: [
{
label: 'Donated',
hidden: false,
backgroundColor: '#1D93D3',
data: []
},
{
label: 'Received',
hidden: false,
backgroundColor: '#C7031F',
data: []
}
]
}
This is the DonationChart component:
import { Bar, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins;
export default {
extends: Bar,
name: 'ClashRoyaleDonationChart',
mixins: [reactiveProp],
mounted () {
// Overwriting base render method with actual data.
this.renderChart(this.chartData,
{
responsive: true,
maintainAspectRatio: false
})
}
}
PS: Interestingly, clicking the legend displays the data properly.