title: Vue and Chartjs - Running a simple example of vue-chartjs
body: <p>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.</p>
  
  <p>This is my file DonutChart.vue:</p>
  
  <pre><code>&lt;template&gt;
   // NOT SURE IF SOMETHING SHOULD GO HERE
  &lt;/template&gt;
  
  &lt;script&gt;
    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]
            }
          ]
        },)
      }
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>This is the parent component, ´Usage.vue´:</p>
  
  <pre><code>&lt;template&gt;
        &lt;h1&gt;USAGE&lt;/h1&gt;
        &lt;st-donut-chart&gt;&lt;/st-donut-chart&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    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,
      }
  
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>DonutChart.vue and Usage.vue are on the same directory:</p>
  
  <p><a href="https://i.stack.imgur.com/BWHIj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BWHIj.png" alt="enter image description here"></a></p>