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

[nulty]

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.

[nulty]

Ah that makes sense!

Still getting to grips with Vue 😉

Thank you very much!

[razerraz]

I get to this issue too, and took a while to understand what was going wrong
The fact is, with all the respect I have for the work done here, subclassing with this extend method seems not to be the common way to do javascript modules. Maybe it's better this way, but confusing. I'm a python guy, indeed familiar with classes and inheritance, but I don't like doing this way in JS, too far from what is going on under the hood. So I was confusing too and I always am when I read this extends thing...

[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>

[apertureless]

Hey @razerraz

well it is not that uncommon. If you take a look at the react community, you are mostly extending react components.

However, yeah it is rather unique in vue, but in this case IMO a good fit. Beacuse vue-chartjs is only a wrapper for chartjs. Kind of a boilerplate, so you don't need to create your canvas element, set the props for the width and height, and the render methods.

So while it is true, that there is some "magic" behind the components you are extending it is also the main purpose for this package.

Expect the mixins there is not much code or logic behind the chart components.

[razerraz]

I have some ways of thinking that can not be so common in the javascript world, especialy with react community since I got sick reading 10 minutes of tutorial about it.
I'm a python man, like I said previously, it is my way of thinking. I always need to do some small JS work, and I spend a lot of time to get into the fact I'm facing a prototyping language and a lot more to get used of this fact.
Do class and extends hurts me, since it feel to do JS with a python way of thinking, subclassing everything without having super as a solve everything tool. Big mistake imho.
Your work here is near state of art, the code is easy to follow, and dealing with chart.js don't seems not to be so simple. Extend method seems to be the natural way, and not so problematic even for a guy like me. But maybe some doc "extend" about this fact should be a good thing ?

[apertureless]

Yeah I am generally not a big fan of js fake "classes". And also not a big fan of extending etc. But like I said in this case, it made sense.

Yeah, the docs could need some work on this fact, as it seems confusing for some people.
Will add some infos about it. 👍

[richill]

<template src="../../views/chartjshtml/chartsjs.html"></template> in the .vue js file, template was removed and changed into divs <div></div> but i can no longer access my html file "../../views/chartjshtml/chartsjs.html" - how does one go about this in vue js?

[ramey29]

the error is due to **this.$refs.canvas.getContext('2d')** in BaseCharts.js , hence you can just add reference for the canvas object by adding below line to your template <canvas ref="canvas"></canvas>
and it shall work