[Chartjs]-Vuechart js not rendering on a component

by

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.

Leave a comment