Reactive Vue Chart.js component using Typescript

Question

Using vue-property-decorator (or actually its Component and Prop of vue-class-component) and vue-chartjs-typescript, I am trying to make a BarChart-component with the properties chartData and options. The following code actually works when serving the app:

<script lang="ts">
  import { Bar, mixins } from 'vue-chartjs-typescript'
  import Vue from 'vue'
  import { Component, Prop } from 'vue-property-decorator'
  const { reactiveProp } = mixins

  @Component({
    extends: Bar,
    mixins: [reactiveProp],
  })
  export default class BarChart extends Vue {
    @Prop()
    chartData: any

    @Prop({default: function () { return {} }})
    options!: object

    mounted() {
      this.renderChart(this.chartData, this.options)
    }
  }
</script>

However, it fails when building the app. Also my IDE (PyCharm Pro) gives the same error:

TS2339: Property 'renderChart' does not exist on type 'BarChart'.

So when using the @Component({extends: Bar}), for the interpreter it is not clear that this component extends Bar. I've already tried to extend Bar instead of Vue, so export default class BarChart extends Bar. But that gives the following error:

TypeError: Super expression must either be null or a function

Any ideas how to fix this issue?

Answer 1

You can explicitly define the function you want to use inside the class BarChart

  public renderChart!: (chartData: any, options: any) => void