CODEWITHSUNDEEP
vue.jschart.js
Jack Gee
Jack Gee

Reputation: 146

ChartJS loading errors from axios API call in Vue.js

I am trying to render charts for a dashboard made in Vue.JS and I have a flask API set as a dummy backend.

I'm following the tutorial on https://vue-chartjs.org/guide/#chart-with-api-data and am having trouble rendering my visualisations.

My component code is:

<template>
  <Bar
    v-if="loaded"
    :data="chartData"
  />
</template>

<script>
import { Bar } from 'vue-chartjs'
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
import axios from 'axios'

ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)

export default {
  name: 'BarChart',
  components: { Bar },
  data: () => ({
    loaded: false,
    chartData: null
  }),
  async mounted () {
    this.loaded = false

    axios.get('/genres')
      .then((res) => {
        console.log(res.data)
        this.chartData = { labels: res.data.labels, dataset: [{ data: res.data.data }] }
        this.loaded = true
      })
      .catch((err) => {
        console.error(err)
      })
  }
}
</script>

I am getting the following in the console:

handled error during execution of mounted hook 
  at <Anonymous ref=fn<reforwardRef> type="bar" data= Object  ... > 
  at <Bar key=0 data= Object > 
  at <BarChart> 
  at <AboutView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) > > 
  at <RouterView> 
  at <App>
w

and

ils.ts:60 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'map')
    at setDatasets (utils.ts:60:1)
    at cloneData (utils.ts:97:1)
    at renderChart (chart.ts:35:1)
    at eval (runtime-core.esm-bundler.js:2756:1)
    at callWithErrorHandling (runtime-core.esm-bundler.js:173:1)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:182:1)
    at hook.__weh.hook.__weh (runtime-core.esm-bundler.js:2731:1)
    at flushPostFlushCbs (runtime-core.esm-bundler.js:359:1)
    at flushJobs (runtime-core.esm-bundler.js:413:1)

I don't know where these errors are coming from as I'm quite new to JS / Vue / Chart.JS, so any help would be appreciated!

Upvotes: 0

Views: 295

Answers (1)

uminder
uminder

Reputation: 26150

The error comes from vue-chartjs; more precisely from line 60 of the function setDatasets, which is defined inside the file utils.ts.

The problem can most probably be solved if you change the following line of your code.

this.chartData = { labels: res.data.labels, dataset: [{ data: res.data.data }] }

Instead of dataset, specify datasets as follows:

this.chartData = { labels: res.data.labels, datasets: [{ data: res.data.data }] }

If this doesn't help, the structure of res.data.data needs to be checked. Make sure, it complies with one of the formats expected by Chart.js.

Upvotes: 0

Related Questions