Vue-chartjs: TypeError: this.$refs.canvas is undefined

Created on 13 Nov 2017 · 5Comments · Source: apertureless/vue-chartjs

Expected Behavior

import the package, extend the Bar Chart and render it.

Actual Behavior

Using this package on a vuetify project, and extending the Bar chart, as the code example of the README, when i want to render the chart, it throws me an error:

[Vue warn]: Error in mounted hook: "TypeError: this.$refs.canvas is undefined"

Environment

vue.js version: 2.4.2
vue-chart.js version: 2.7.1
npm version: 5.5.1

❓ question

Source

holic-cl

Most helpful comment

Can you post your code?

I would guess you are using single-file-components?
If so, you need to remove the template part.
Vue.js can't merge templates. So it replaces the template of the extended component.
And if you have an empty template tag, it will replace the base components template where the canvas is and some other markup with an empty div.

This will not work

<template>

</template>

<script>
import { Bar } from 'vue-chartjs'

export default {
  extends: Bar,
  mounted () {
    // Overwriting base render method with actual data.
    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      datasets: [
        {
          label: 'GitHub Commits',
          backgroundColor: '#f87979',
          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
        }
      ]
    })
  }
}
</script>

<style>

</style>

This will work

<script>
import { Bar } from 'vue-chartjs'

export default {
  extends: Bar,
  mounted () {
    // Overwriting base render method with actual data.
    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      datasets: [
        {
          label: 'GitHub Commits',
          backgroundColor: '#f87979',
          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
        }
      ]
    })
  }
}
</script>

<style>

</style>

apertureless on 13 Nov 2017

👍9 🚀1

All 5 comments

Can you post your code?

This will not work

<template>

</template>

<script>
import { Bar } from 'vue-chartjs'

export default {
  extends: Bar,
  mounted () {
    // Overwriting base render method with actual data.
    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      datasets: [
        {
          label: 'GitHub Commits',
          backgroundColor: '#f87979',
          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
        }
      ]
    })
  }
}
</script>

<style>

</style>

This will work

<script>
import { Bar } from 'vue-chartjs'

export default {
  extends: Bar,
  mounted () {
    // Overwriting base render method with actual data.
    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      datasets: [
        {
          label: 'GitHub Commits',
          backgroundColor: '#f87979',
          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
        }
      ]
    })
  }
}
</script>

<style>

</style>

apertureless on 13 Nov 2017

👍9 🚀1

@apertureless I suggest adding your advice in readme.

If so, you need to remove the template part.
Vue.js can't merge templates. So it replaces the template of the extended component.
And if you have an empty template tag, it will replace the base components template where the canvas is and some other markup with an empty div.

akleandrov on 13 Nov 2017

Thanks, it fixed my problem and now is working well.

I think is useful to add this to some place in the documentation too.

Thanks again.

holic-cl on 13 Nov 2017

Hi - great job with Vue-Chartjs! I just installed and ran right into this problem for 30 mins before coming across this thread - I would also advise just adding a quick reminder about not including the template tags in the documents.

This is one of those very simple things that's super easy to overlook! I read about 30 posts and up & down the documentation before coming across this concise solution :)