this.$refs doesn't seem to have expected canvas property

Expected Behavior

Expect the example chart to render in the browser.

Actual Behavior

Error in console and nothing renders to the page.

Error occurs in the Bar [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'getContext' of undefined"

TypeError: Cannot read property 'getContext' of undefined
    at VueComponent.renderChart (Bar.js?7b87:78)
    at VueComponent.boundFn [as renderChart] (vue.runtime.esm.js?ff9b:182)
    at VueComponent.mounted (win-ew-pie-chart.vue?6dcc:15)
    at callHook (vue.esm.js?efeb:2665)
    at Object.insert (vue.esm.js?efeb:3526)
    at invokeInsertHook (vue.esm.js?efeb:5469)
    at Vue$3.patch [as __patch__] (vue.esm.js?efeb:5639)
    at Vue$3.Vue._update (vue.esm.js?efeb:2414)
    at Vue$3.updateComponent (vue.esm.js?efeb:2538)
    at Watcher.get (vue.esm.js?efeb:2881)

My Vue Component

<template>
<div class="app">

</div>
</template>

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

// console.log(Bar)
export default Bar.extend({
  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 lang="css">
</style>

Environment

• vue.js version: 2.4.2
• vue-chart.js version: 2.7.2
• webpack version: 3.3.0
• yarn version: 0.27.5

[apertureless]

You have to remove the template part of your component.

You are extending the baseChart component, which comes with a template. If you keep the

<template>
<div class="app">

</div>
</template>

you overwrite everything from the base chart, as templates can not be merged properly.

[l-zhi]

Just modify the template like this , may fixed the error

<template> <div class="container"> <canvas ref="canvas" width="900" height="400"></canvas> </div> </template>