[Vuejs]-Chart.js not rendering properly until window resize or toggling line in legend

by

0👍

Like the question you linked here, it’s probably another problem caused by async loading. You’re doing the new Chart(...) in the child component’s mounted, by which time the data prop is probably still empty (on its way from the api url). Try removing the mounted and adding a watch like this: 

data() {
    return {
        loaded: false
    };
},
watch: {
    data: function (newVal, oldVal) {
        if (newVal.length>0 && !this.loaded) {
            this.loaded = true;
            new Chart(...);
        }
    }
}

I added a loaded flag here to make sure we only init the chart once, since it automatically adjusts to resizes, etc.

👤JJPandari

Leave a comment