[Chartjs]-Uncaught (in promise) TypeError: this.renderChart is not a function VueJs Chart.js

by

2👍

✅

You are using V4 of vue-chart.js, the chart creation process has been changed as you can read here in the migration guide.

So instead of calling this.renderChart which was the old syntax you now have to use the actual component and pass the data to it like so:

<template>
  <Bar :chart-data="chartData" />
</template>

<script>
// DataPage.vue
import { Bar } from 'vue-chartjs'
import { Chart, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'

Chart.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)

export default {
  name: 'BarChart',
  components: { Bar },
  data() {
    return {
      chartData: {
        labels: [ 'January', 'February', 'March'],
        datasets: [
          {
            label: 'Data One',
            backgroundColor: '#f87979',
            data: [40, 20, 12]
          }
        ]
      }
    }
  }
}
</script>

Leave a comment