vue-chartjs: [Typescript + vue-class style components] Argument of type 'typeof UsageChart' is not assignable to parameter of type 'VueClass'

You should use it like this:

<script lang="ts">
import { Bar } from 'vue-chartjs';
import { Component, Vue } from 'vue-property-decorator';

@Component({
  extends: Bar,
})
export default class CommitChart extends Bar {
}
</script>

The solution that worked for me is to extend the vue Mixins , like in the example below.

</script>
export default class DoughnutChart extends Mixins(Doughnut) {
}
</script>

@HoehensteigerGames in your ‘Dashboard’ class try adding

constructor() {super);}

You should use it like this:

<script lang="ts">
import { Bar } from 'vue-chartjs';
import { Component, Vue } from 'vue-property-decorator';

@Component({
  extends: Bar,
})
export default class CommitChart extends Bar {
}
</script>

@Djaler, for me this results in the following error: Uncaught TypeError: Super expression must either be null or a function.

The workarounds by @schnetzi and @vivss are working for now. I don’t know enough yet to suggest a proper fix though…

I tried every single solution here and I keep getting this. Why is it that Typescript is the standard at this point and yet so many libraries fail to support it properly? STEP IT UP FFS. Usually if I do the dumb hack as described here and basically not declare ‘lang=“ts”’ it’s enough but in this retarded fucking case I still get the same error. PLZ KILL ME

To work around the error I’ve written my class as follows

import {Component, Vue, Prop} from 'vue-property-decorator';
import VueCharts from 'vue-chartjs';
import {Bar} from 'vue-chartjs';

@Component({
  extends: Bar,
})
export default class BarChart extends Vue {
  mounted () {
    // @ts-ignore
    this.renderChart({})
  }
}

Only typescript solution I found:

<template>
    <graph-comp ref="graph" />
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Line } from 'vue-chartjs';

@Component({
    components: { 'graphComp': Line }
})
export default class CustomGraph extends Vue {

    constructor() {
        super();
    }

    mounted(): void {
        (this.$refs.graph as Line).renderChart({
            labels: ['1', '2', '3', '4', '5', '6'],
            datasets: [
                {
                    label: 'Chart',
                    data: [300, 700, 500, 700, 200, 800],
                }
            ]
        });
    }
}
</script>

The provided solutions are incomplete. At least with my setup I still face the following issues:

• export default class MyChart extends Vue<Bar> results in a compiler warning No base constructor has the specified number of type arguments and doesn’t infer the types, so no methods/props. I could declare them myself to get rid of the warning but again, just half a solution.

• export default class MyChart extends Mixins(Bar) results in the same as above with a slightly different compiler warning Argument type Bar is not assignable to parameter type VueClass<unknown>

• export default class MyChart extends Bar works perfectly for the compiler and types are available but at runtime, it crashes with the following error: TypeError: Class extends value #<Object> is not a constructor or null

Does any of these solutions work A-Z for you? Any ideas what may be missing?

The following worked for me too, conceptually similar, if using vue-class-component as opposed to vue-property-decorator (since they’re the same thing anyway).

    import {Component} from "vue-property-decorator";
    import {mixins} from "vue-class-component";
    import {Bar} from "vue-chartjs"; 

    @Component({
        name: "OverviewChart",
    })
    export default class OverviewChart extends mixins(Bar) {

    }