Chartjs-Chart.js will not render using vue.js until window resizes

by

2👍

✅

Accessing DOM in ready() is tricky, because Vue updates DOM asynchronously, so changes may have not been completely applied yet, and/or the browser has not yet done a new layout.

use $nextTick() to defer until the update has been completed:

ready() {
  this.$nextTick(function() {
    this.drawChart();     
  })
},

This usually does the trick in these situations, at least on the Vue side of things. Can’t say much about the chart.js config.

Leave a comment