Vue-chartjs: this.renderChart is not a function when using default example

[tiriwo]

What other configurations or imports do I need to make, i get TypeError: this.renderChart is not a function when I use the example given as,

import { Bar } from 'vue-chartjs'

export default {
  extends: Bar,
  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]
        }
      ]
    })
  }
}

do i need to define the function or what?

[apertureless]

Are you using the latest version of vue-chartjs ?

[tiriwo]

As per the last the commit, yes i'm using the latest version

[apertureless]

Can you post a reproduction?
Generally this seems right.

You are extending the Bar component and like a mixin you have all methods and props defined in there. So this.renderChart() should be available.

You could try mixins: [Bar] instead of extends

[tiriwo]

mixins: [Bar] works thanks,

[pitometsyurii]

I have the same error, and using mixins doesn't work too.

[johngoben-righteye]

I am having the same error and mixins also do not work.

[LenKIM]

I found how to solve this problem. I added BaseCharts.js in example packages on project and then It works.

hope to solve the problem you have