CODEWITHSUNDEEP
typescriptvuejs2chart.jsvue-class-components
Neman
Neman

Reputation: 1307

Reactive Vue Chart.js component using Typescript

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?

Upvotes: 7

Views: 3815

Answers (1)

user10543119
user10543119

Reputation: 161

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

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

Upvotes: 5

Related Questions