Vuechart js not rendering on a component

Question

I'm trying to use the vue-chartjs npm package, but my code below is not rendering the chart. I'm using VueJS 2 and have already installed the package using npm.

<canvas id="chartRecord" width="100%" height="400"></canvas>

<script>
  import { Line } from 'vue-chartjs'
  export default {
    mounted () {
      Line.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>

I'm getting this error:

[Vue warn]: Error in mounted hook: "TypeError: __WEBPACK_IMPORTED_MODULE_0_vue_chartjs__.Line.renderChart is not a function"

thanksd · Accepted Answer · 2017-07-07 15:18:52Z

2

The vue-chartjs module provides Vue components that are intended to be extended in order to customize.

The correct syntax to do what you're trying to do:

// MyChart.js
import { Line } from 'vue-chartjs'
export default Line.extend({
  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]
        }
      ]
    })
  }
}

Notice that you can simply put this in a .js file as there's no need to specify a template since it's already included in the Line component being imported, and since styling is mostly done in the options of the chart.

You can then import the extended component like any other component:

//Parent.vue
<template>
  <my-chart></my-chart>
</template>

<script>
import MyChart from './MyChart'

export default {
  components: { MyChart }
}
</script>

See the documentation.

edited Jul 7, 2017 at 15:18

answered Jul 7, 2017 at 15:15

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

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

8 Comments

claudios Over a year ago

Can you please explain a lil bit? and where should I put that script? and how to access it inside my component. Thank!

thanksd Over a year ago

Updated my answer

claudios Over a year ago

Tried it and added Chartrecord.js inside js folder. my components are inside components folder but no luck.

thanksd Over a year ago

What do you mean "no luck"? Are you getting an error?

claudios Over a year ago

Yes it says Cannot find module Unexpected token, expected , (17:0)`

|

Collectives™ on Stack Overflow

Vuechart js not rendering on a component

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related