Vue-chartjs: Could not find a declaration file for vue-chartjs

Created on 19 Jun 2018 · 6Comments · Source: apertureless/vue-chartjs

Expected Behavior

Having run npm i vue-chartjs and installed the peer chart.js import { Line } from 'vue-chartjs'; should enable the use of a line chart in a component.

Actual Behavior

Error Message: Could not find a declaration file for vue-chartjs.

Environment

vue.js version: 2.5.16
vue-chart.js version: @latest
npm version: 6.1.10

Package.json depdendencies

"dependencies": { "@fortawesome/fontawesome": "^1.1.8", "@fortawesome/fontawesome-free-solid": "^5.0.13", "@fortawesome/vue-fontawesome": "0.0.23", "bootstrap-vue": "^2.0.0-rc.11", "chart.js": "^2.7.2", "vue": "^2.5.16", "vue-chartjs": "^3.3.2", "vue-class-component": "^6.0.0", "vue-property-decorator": "^6.0.0", "vue-router": "^3.0.1", "vuex": "^3.0.1" },

⚡ feature ✍ help wanted

Source

lee-alderdice

Most helpful comment

Hey @lee-alderdice

I've worked on a PR to add type definitions. However I never really used typescript and also not that experienced in writing *.d.ts for it.

Could you check it out and maybe test it in your project?

I created a new vue create project with TS support.
And used yarn link to link the PR into the project.

It seems to be working now. But verification would be great before merging.

<script lang="ts">
import Component, { mixins } from 'vue-class-component';
import { Bar } from 'vue-chartjs';

@Component
export default class LineChart extends mixins(Bar) {
  mounted () {
    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      datasets: [
        {
          label: 'GitHub Commits',
          backgroundColor: '#f87979',
          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
        }
      ]
  })
  }
}
</script>

apertureless on 20 Jun 2018

👍2

All 6 comments

I have read about creating a .d.ts file within my project but the package is so well used and constructed I can't believe that would be needed.

lee-alderdice on 19 Jun 2018

Are you using typescript?

apertureless on 20 Jun 2018

Yes. Hmm, have I missed something in the docs? Will check again.

lee-alderdice on 20 Jun 2018

Well I have no experience with typescript.
However I will check if I can provide some better support for TS.

Would be great if you could post a small reproduction repo, so I can check it out :)

apertureless on 20 Jun 2018

Sure. Empty vue-cli project with Typescript _et al._ having run npm install and creating a simple Line.vue component importing Line from vue-chartjs.

https://github.com/lee-alderdice/vuechartjs.ts

lee-alderdice on 20 Jun 2018

Hey @lee-alderdice

I've worked on a PR to add type definitions. However I never really used typescript and also not that experienced in writing *.d.ts for it.

Could you check it out and maybe test it in your project?

I created a new vue create project with TS support.
And used yarn link to link the PR into the project.

It seems to be working now. But verification would be great before merging.

<script lang="ts">
import Component, { mixins } from 'vue-class-component';
import { Bar } from 'vue-chartjs';

@Component
export default class LineChart extends mixins(Bar) {
  mounted () {
    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      datasets: [
        {
          label: 'GitHub Commits',
          backgroundColor: '#f87979',
          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
        }
      ]
  })
  }
}
</script>

apertureless on 20 Jun 2018

👍2

Was this page helpful?

0 / 5 - 0 ratings