TypeError: Cannot read property 'getContext' of undefined

[ThaiBinh-13]

Hello, I'm facing an issue that i cannot render my chart in vue3, the Error is TypeError: Cannot read property 'getContext' of undefined at Proxy.renderChart (BaseChart.tsx?b4f3:124). Which is thrown in BaseChart.tsx line 124

[mberneis]

I got a similar problem - Initial warning is

app.js:formatted:8604 [Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function

and later the same getContext error because of the missing ref

Uncaught (in promise) TypeError: Cannot read property 'getContext' of undefined
    at Proxy.renderChart (app.js:formatted:103091)

[edgimopeter]

I had this error, and resolved it by removing the empty tag from my component file. It only needs the <script> portion.

This is explained in the docs for the Vue2 version: https://github.com/apertureless/vue-chartjs/

You can create your components in Vues single file components. However it is important that you do not have the included. Because Vue can't merge templates. And the template is included in the mixin. If you leave the template tag in your component, it will overwrite the one which comes from the base chart and you will have a blank screen.

[mberneis]

I switched to this fork and all seems to work pok:

    "dependencies": {
        "chart.js": "2",
        "vue-chartjs": "https://github.com/davidrunger/vue-chartjs.git#vue-3"
    }

[dalezak]

@mberneis is it required to downgrade chart.js to 2? The latest version is 3.4.1 so that's quite old.

Curious, since things were working fine and stopped, could this issue be related to a newer version of Vue?

[dalezak]

In case it helps others, I upgraded to Vue 3.1.4 which was published 2 days ago, and this error went away for me.