10

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?

Boussadjra Brahim
  • 82,684
  • 19
  • 144
  • 164
Levi007
  • 315
  • 1
  • 3
  • 13

2 Answers2

13

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

tony19
  • 125,647
  • 18
  • 229
  • 307
Boussadjra Brahim
  • 82,684
  • 19
  • 144
  • 164
6

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

mahatmanich
  • 10,791
  • 5
  • 63
  • 82