[Chartjs]-Chart JS flicker when new data is added to chart (Vue)

Seems like you try to call the update method and the renderChart method of the vue wrapper, this makes the chart first try and update and thus will start animating but then you call render so it will render from scratch, try to only call the update method because if you give new values to chart.js and call the update it handles it internally to render the chart again.

I used

this.myChart.destroy()
this.drawchart() 

as a workaround in the past. (instead of this.myChart.update() )

destroy() come form the library itself and drawchart() was my own written function.

Part of my chart function, btw. i didn’t used any vue implemtation, i used the chart.js barebone, maybe your problem is the package itselfe?

drawchart() {
                this.ctx = this.$refs['myCanvas'].getContext("2d");
                Chart.defaults.global.defaultColor = "rgba(0, 1, 0, 0.1)"
                this.myChart = new Chart(this.ctx, {
                        type: 'bar',
                        data: {
                  
                            labels: this.modelarr,
                            datasets: [{
                                data: this.placeholderData[this.picked]
                            }]
                        },
                        options: {
                            showTooltips: false,
                            scales: {
                                yAxes: [{
                                    ticks: {
                                        min: 0
                                    }
                                }]
                            },                         
                            responsive: true
                        }
                    }),
             
            },

    }