[Chartjs]-Chartjs-vue charts are empty

by

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)
  }

}

enter image description here

2👍

This is because you are calling the fillData() method in your mounted hook.
Your chart gets rendered with an empty data object.

And the data gets filled after the chart is rendered. And as chart.js is not reactive, you have an empty chart.

Solutions:

  • Pass a filled data object to the chart instead using the fillData method
  • Or add the reactiveProp mixin

0👍

call your fillData() method in created(){..here...} instead of mounted(){} in your StatsSection.vue will solve your problem. Created will be called before mounted, so your datacollection variable will not be null at first time.

Leave a comment