Vue chartjs disables datasets by default

Question

In my project for my clan, Lords of War on the Supercell games. I am trying to make a chart for the current donations with chart.js. I'm using Vue for the front-end and vue-chartjs for the charts. There is only 1 problem. When i open the page, the datasets are not visible. So how can i fix that?

this 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: when I click the legend, the data is displayed properly

Answer 1

Well, I guess you are using an API to get your data?

Then you need to check if the data is available. Axios / Ajax requests are async. So most of the time, your chart will be rendered without data.

Just add a v-if="loaded" on your chart component and in your

axios.get().then() method, set loaded = true and you should be fine.