TypeError: this.$refs.canvas is undefined

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

[apertureless]

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]

Its added to the readme