CODEWITHSUNDEEP
javascriptchartsvuejs2vue-chartjs
carlhandy
carlhandy

Reputation: 315

Vuejs chart not displaying after page reload

I created a chart using vue-chartjs which renders some data from a JSON endpoint.

The problem is that the chart is not rendered after the page reloads.
This is the HTML that calls the chart component.

<absentee-chart v-if="isLoaded==true" :chart-data="this.chartData"></absentee-chart>

This is the absenteeChart.js file that renders the chart data.

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

export default {
  extends: Bar,
  mixins: [mixins.reactiveProp],
  data: () => ({
    options: {
      responsive: true,
      maintainAspectRatio: false
    }
  }),
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
}

And finally my .vue file.

created () {
    axios
      .get(constants.baseURL + "absentee-reports/graph", auth.getAuthHeader())
      .then(response => {
        this.graph = response.data;
       
        var males = {
          data: []
        };

        var females = {
          data: []
        };

        var len = this.graph.length;

        for (var i = 0; i < len; i++) {
          if (this.graph[i].year == "2009") {
            this.labels.push(this.graph[i].month);  
            //push to males
            this.datasets[0].data.push(this.graph[i].males);
            //push to females
            this.datasets[1].data.push(this.graph[i].females);

          }
        }
        this.isLoaded = true;
        this.chartData.labels = this.labels;
        this.chartData.datasets = this.datasets;
      });
  }

UPDATE: The chart appears after I resize my browser page.

Upvotes: 0

Views: 1320

Answers (1)

carlhandy
carlhandy

Reputation: 315

The solution to this was separating all my chart logic from my .vue file and omitting the use of mixins and reactiveProp. From what I could tell, this issue lies deep within the core of chart.js

Hope this helps somebody.
Cheers :)

Upvotes: 1

Related Questions