Vue and Chartjs - Running a simple example of vue-chartjs

Question

I'm trying to use Chart.js with Vue.js and this is what I got it is compiling but I don't see anything displayed on the GUI.

This is my file DonutChart.vue:

<template>
 // NOT SURE IF SOMETHING SHOULD GO HERE
</template>

<script>
  import {Bar} from 'vue-chartjs'
  // import the component - chart you need

  export default Bar.extend({
    mounted () {
      // Overwriting base render method with actual data.
      this.renderChart({
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
        datasets: [
          {
            label: 'News reports',
            backgroundColor: '#3c8dbc',
            data: [12, 20, 12, 18, 10, 6, 9, 32, 29, 19, 12, 11]
          }
        ]
      },)
    }
  });
</script>

This is the parent component, ´Usage.vue´:

<template>
      <h1>USAGE</h1>
      <st-donut-chart></st-donut-chart>
</template>

<script>
  import Vue from 'vue';
  import Filter from './shared/filter/Filter';
  import DonutChart from './DonutChart'

  export default new Vue({
    name: 'st-usage',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    components: {
      'st-filter': Filter,
      'st-donut-chart': DonutChart,
    }

  });
</script>

DonutChart.vue and Usage.vue are on the same directory:

Answer 1

vue-chartjs author here.

Well it's a bit confusing for beginners. However vue-chartjs is utilizing Vue.extend().

That's why you're have to extent the imported component.

Step 1

• Create your own component and extend the base chart. This way you have more control over everything.

Your DonutChart.vue was nearly right. But you have to remove the <template> from your component. Because of the Vue.extend() you're extending the base component. So you have access to the props, methods etc. defined there. However there is no way of extending templates. So if you let the template tag in your component, it will overwrite the template defined in the base chart, that you're extending. Thats why you can't see anything ;)

YourChart.vue:

<script>
  // Import the base chart
  import {Bar} from 'vue-chartjs'

  // Extend it
  export default Bar.extend({
    props: ['chartdata', 'options'],
    mounted () {
      // Overwriting base render method with actual data and options
      this.renderChart(this.chartdata, this.options)
    }
  })
</script>

Now you have the Chart Component. You can put more login in there, of define some styles or options.

Step 2

Import it and feed it the data.

Like you did :)

---

Update

With version 3 of vue-chartjs the creation has changed. Now its more vue-like.

<script>
  // Import the base chart
  import {Bar} from 'vue-chartjs'

  // Extend it
  export default {
    extends: Bar,
    props: ['chartdata', 'options'],
    mounted () {
      // Overwriting base render method with actual data and options
      this.renderChart(this.chartdata, this.options)
    }
  }
</script>

Or you can use mixins

<script>
  // Import the base chart
  import {Bar} from 'vue-chartjs'

  // Extend it
  export default {
    mixins: [Bar],
    props: ['chartdata', 'options'],
    mounted () {
      // Overwriting base render method with actual data and options
      this.renderChart(this.chartdata, this.options)
    }
  }
</script>