[Vuejs]-Vue3 Chart.js not rendering

by

0👍

I was missing the import { defineComponent } from 'vue' in my component. Now it works using the below code.

<template>
  <div class="container">
    <line-chart
      v-if="loaded"
      :chartdata="chartdata"
      :options="options"/>
  </div>
</template>

<script>
import LineChart from '../components/Chart.vue'
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'LineChartContainer',
  components: { LineChart },
  data: () => ({
    loaded: false,
    chartdata: null,
    options: {
      responsive: true,
    }
  }),
  async mounted () {
    this.loaded = false
    try {
      const quotes = [
        1, 2, 3, 4,
      ]
      this.chartdata = quotes
      this.loaded = true
    } catch (e) {
      console.error(e)
    }
  }
})
</script>

Leave a comment