Chartjs-Why aren't my data points getting placed in the corresponding locations in my chart?

by

0👍

getWeightData() populates weightData asynchronously, so you’d have to await the function call before proceeding with setting up the chart.

First, wrap getWeightData() in a Promise 1️⃣so that you could return the fetched weight data 2️⃣(instead of setting this.weightData inside the Promise):

methods: {
  getWeightData() {
    return new Promise((resolve, reject) => { /* 1 */
      firebase.auth().onAuthStateChanged(user => {
        if (user) {
          db.collection('users')
            .doc(user.uid)
            .collection('weight')
            .get()
            .then(querySnapshot => {
              const weightData = []

              if (!querySnapshot.empty) {
                querySnapshot.forEach(doc => {
                  weightData.push(doc.data().weight)
                })
              }

              resolve(weightData) /* 2 */
            })
            .catch(reject)
        } else {
          reject()
        }
      })
    })
  }
}

Then in mounted(), store the awaited result of getWeightData() in this.weightData 3️⃣:

async mounted() {
  this.weightData = await this.getWeightData() /* 3 */

  /* now, setup chart with `this.weightData` */
}

Leave a comment