CODEWITHSUNDEEP
javascriptnode.jsvue.jschartschart.js
user17206275
user17206275

Reputation:

Chartjs pie chart and Vuejs

I am using chart.js to create a pie chart, I added filters to the chart to change the scope. I set the overview filter to true so the user can load on screen and see the whole piechart overview. For some reason the piechart does not load until the overview filter is clicked even though its already set to true. I have a method called loadData() that does the work to filter through the api call. The chart works perfect, I just cannot get it to render on load.

<Chart
    ref="pie"
    type="pie"
    v-if="!isLoading"
    :data="chartData"
    :options="options"
    />

 mounted() {
  this.getChartData()
    
  },
  methods: {
    getChartData() {
      this.isLoading = true;
      rpc('chart', 'getChartData')
      .then((data) => {
        this.chartMaterials = data;
        this.isLoading = false;      
      })
      .catch((err) => {
        console.error(err)
      })
    },
 watch: {
    data(){
      this.loadData();
    },

Upvotes: 0

Views: 642

Answers (1)

Tom Matthews
Tom Matthews

Reputation: 39

It looks like you're just missing your data, so isLoading is never initialised. Try adding:

data() {
 return {
  isLoading: false
 }
}

Upvotes: 0

Related Questions