chartjs-vue charts are empty

Question

I'm following examples to make a test chart & the chart renders, but it is blank with dummy data.

My first thought is maybe options aren't being passed for the lines, but with every other type of chart it is the same as if dataCollection just isn't being populated. I am very new to Vue (few hours) so maybe it has something to do with not updating state?

Languages.js

import { Line, mixins } from 'vue-chartjs'
//const { reactiveProp } = mixins

export default {
  extends: Line,
  //mixins: [reactiveProp],
  props: ['options'],
  mounted () {
    // this.chartData is created in the mixin.
    // If you want to pass options please create a local options object
    this.renderChart(this.chartData, this.options)
  }
}

StatsSection.vue

<template>
<!-- Stats Section -->
<div class="stats-wrapper" style="margin: 15px 0; padding: 15px;">
  <languages :chart-data="datacollection"></languages>
</div>
</template>

<script>
import Languages from './charts/Languages.js'

export default {
  components: {
    Languages
  },
  data() {
    return {
      datacollection: {}
    }
  },
  mounted() {
    this.fillData()
  },
  methods: {
      fillData () {
        this.datacollection = {
          labels: [80, 12],
          datasets: [
            {
              label: 'Data One',
              backgroundColor: '#f87979',
              data: [40, 60]
            }, {
              label: 'Data One',
              backgroundColor: '#f87979',
              data: [72, 43]
            }
          ]
        }
      }
    }
}
</script>

Answer 1

It was indeed because no options were being passed for the gridlines. The example I was following assumes you already have your options set where I hadn't.

Languages.js

import {
  Bar,
  mixins
} from 'vue-chartjs'

export default {
  extends: Bar,
  mixins: [mixins.reactiveProp],
  props: ['chartData', 'options'],
  data() {
      return {
          options: { 
              scales: {
                  yAxes: [{
                      ticks: {
                          beginAtZero: true
                      },
                      gridLines: {
                          display: true
                      }
                  }],
                  xAxes: [{
                      gridLines: {
                          display: false
                      }
                  }]
              },
              legend: {
                  display: true
              },
              responsive: true,
              maintainAspectRatio: false
          }
      }
  },
  mounted() {
      this.renderChart(this.chartdata, this.options)
  }

}