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?

user10543119 · Accepted Answer · 2019-09-30 21:44:07Z

5

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

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

answered Sep 30, 2019 at 21:44

user10543119

1615 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Reactive Vue Chart.js component using Typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related