[Chartjs]-Vue and Chartjs – Running a simple example of vue-chartjs

by

11👍

✅

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>

0👍

So now I got it working:

  import DonutChart from './DonutChart'

  export default ({  //<= Notice change here
    name: 'st-usage',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    components: {
      'st-filter': Filter,
      'line-example':LineExample,
      'st-donut-chart':DonutChart,
    }

  });

Leave a comment