[Vuejs]-Line chart not rendering data

by

0👍

✅

I fixed it by adding async to my function and a loading value:

Wave.vue:

<WaveChart
    v-if="loaded"
    id="line-chart"
    :chartData="chartData"
    :options="chartOptions"
    :styles="waveChartStyle"
></WaveChart>

data() {
    return {
    loading: false
    }
}

methods: {
async updateWave(wave) {
  if (!wave) return;
  this.chartData.datasets.length = 0;
  try {
    wave.Categories.forEach(element => {
      var datasets = {
        label: element.Name,
        backgroundColor: `rgba(${element.R}, ${element.G}, ${
          element.B
        }, 1)`,
        borderColor: `rgba(${element.R}, ${element.G}, ${element.B}, 1)`,
        data: element.Values
      };
      this.chartData.datasets.push(datasets);
    });
    this.loaded = true;
  } catch (e) {
    console.error(e);
  }
}
}

And for updating I added a watcher in WaveChart.js:

watch: {
    options: {
      deep: true,
      handler: "reRender"
    },
    chartData: {
      deep: true,
      handler: "reRender"
    },
  }

Leave a comment