I'm using Vue.js 3 and I can't make a chart with Vue-chartjs because of this error:
Uncaught TypeError: createElement is not a function
at Proxy.render (BaseCharts.js?86fc:8)
at renderComponentRoot (runtime-core.esm-bundler.js?5c40:673)
at componentEffect (runtime-core.esm-bundler.js?5c40:4475)
at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
at effect (reactivity.esm-bundler.js?a1e9:17)
at setupRenderEffect (runtime-core.esm-bundler.js?5c40:4458)
at mountComponent (runtime-core.esm-bundler.js?5c40:4416)
at processComponent (runtime-core.esm-bundler.js?5c40:4376)
at patch (runtime-core.esm-bundler.js?5c40:3991)
at mountChildren (runtime-core.esm-bundler.js?5c40:4180)
this is App.vue that displays my chart:
<template>
<line-chart />
</template>
<script>
import LineChart from "./components/Chart";
export default {
name: "App",
components: {
LineChart
}
};
</script>
and this is Chart.vue that renders a line chart :
<script>
import { Line } from "vue-chartjs";
export default {
extends: Line,
data: () => ({
chartdata: {
labels: ["January", "February"],
datasets: [
{
label: "Data One",
backgroundColor: "#f87979",
data: [40, 20]
}
]
},
options: {
responsive: true,
maintainAspectRatio: false
}
}),
mounted() {
this.renderChart(this.chartdata, this.options);
}
};
</script>
I have tried this with various forms of data, but apparently, the problem is elsewhere. Do I have to wait for the vue.js 3 ecosystem to become more complete?
vue-chartjs is a wrapper for Chart.js in vue. You can easily create reuseable chart components. Supports Chart.js v3 and v2.
If you're planning to use a library across many Vue projects, or you want to share it with the world, you can build this into your own plugin! Vue. use(MyLibraryPlugin); With these two lines, we can use the library in any component just like we can with Vue Router, Vuex, and other plugins that utilize Vue.
A render function returns a virtual DOM node, commonly named VNode in the Vue ecosystem, which is an interface that allows Vue to write these objects in your browser DOM. They contain all the information necessary to work with Vue.
Update 2022
The library supports vue 3 now and you can install as follows :
pnpm add vue-chartjs chart.js
# or
yarn add vue-chartjs chart.js
# or
npm i vue-chartjs chart.js
Old answer
According to this issue this library doesn't support Vue 3 yet, and the origin of this error could explained here :
in vue 2 we do the following to create a render function :
export default {
render(createElement ) { // createElement could be written h
return createElement('div')
}
}
in Vue 3 :
import { h } from 'vue'
export default {
render() {
return h('div')
}
}
which means that createElement
is undefined
https://github.com/apertureless/vue-chartjs
Vue Charts does not seem to be ready for vue3
Compatibility
v1 later @legacy
Vue.js 1.x
v2 later
Vue.js 2.x
Discussion about vue3 here: https://github.com/apertureless/vue-chartjs/issues/601 and here: https://github.com/apertureless/vue-chartjs/issues/637
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With