[Bug]: Vue2 Legacy missing typescript definitions

Would you like to work on a fix?

• Check this if you would like to implement a PR, we are more than happy to help you go through the process.

Current and expected behavior

Following the example on https://vue-chartjs.org/guide/#creating-your-first-chart I run into an issue with typescript:

Could not find a declaration file for module 'vue-chartjs/legacy'. '.../node_modules/vue-chartjs/legacy/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/vue-chartjs` if it exists or add a new declaration (.d.ts) file containing `declare module 'vue-chartjs/legacy';`Vetur(7016)

Unfortunatley there are no types for this project available at https://github.com/DefinitelyTyped/DefinitelyTyped

I could solve this issue by using vue-chartjs@3.5.1.

Reproduction

https://vue-chartjs.org/guide/#creating-your-first-chart

chart.js version

3.7.1

vue-chartjs version

4.0.6

Possible solution

Add type definitions for the legacy package of vue-chartjs

[Santobert]

@thabarbados thanks for the quick fix. Types are there now and at least the bar chart works flawlessly (as far as I can see). Unfortunately chart types other than the bar chart cannot be used as Vue components.

Minimal example:

<template>
  <div>
    <LineChartGenerator
      :chart-options="chartOptions"
      :chart-data="chartData"
      chart-id="line-chart"
      dataset-id-key="label"
    />
  </div>
</template>

<script lang="ts">
import { Chart, registerables } from "chart.js";
import Vue from "vue";
import { Line as LineChartGenerator } from "vue-chartjs/legacy";

Chart.register(...registerables);

export default Vue.extend({
  components: { LineChartGenerator },
  data() {
    return {
      chartData: {
        labels: [
          "January",
          "February",
          "March",
          "April",
          "May",
          "June",
          "July",
        ],
        datasets: [
          {
            label: "Data One",
            backgroundColor: "#f87979",
            data: [40, 39, 10, 40, 39, 80, 40],
          },
        ],
      },
      chartOptions: {
        responsive: true,
        maintainAspectRatio: false,
      },
    };
  },
});
</script>

Funny thing is that while the error is reported, you can see the rendered chart in the background.

index.d.ts

[yoooz]

@glennpierce

Sorry, I don’t have any idea how you can try my repository easily.

But I can tell you my way

1. clone and build my vue-chartjs repository
   1. build command is pnpm build and please check emitted index.d.ts
2. replace your/project/node_modules/vue-chartjs/index.d.ts and yoooz/vue-chartjs/index.dts

Even if yoooz/vue-chartjs add your package.json , installing only yoooz/vue-chartjs/package.json only . I think easily install my commit if my pull request merged.