CODEWITHSUNDEEP
vue.jsaxiosapexcharts
Heiyoo
Heiyoo

Reputation: 101

vue apexcharts: charts in component rendered directly without animation after get axios data from props

In the parent template, I call a component and pass the axios data:

// template
<myChart
 :pdata="axiosData"
/>

// script
export default {
  data() {
    return {
      axiosData,
    }
  }
  created() {
    axios.get('some-url')
      .then(response => {
        this.axiosData = response.data
      })
  }
}

Because the child component "myChart" rendered an empty chart before it receives the props data, so I updated the chart series in a watch:

// below code is implemented in component
// template
<vue-apex-charts
  type="donut"
  height="200"
  :series="mySeries"
  :options="myOptions"
/>

// script
export default {
  props: {
    pdata: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
       mySeries: [],
       myOptions: ...
    }
  },
  watch: {
    pdata(val) {
      this.mySeries= val
    },
  }
}

The data in chart is rendered without any animation - if I set a static series in data(), chart is rendered with animation.

I tried some API like ApexCharts.render(), ApexCharts.updateOptions(..), ApexCharts.updateSeries(..), but they all can't trigger the data animation after props data updated in watch.

So what is the best practice in such scenario? How to trigger the animation after get axios data from server...

Thanks in advance.

Upvotes: 1

Views: 2292

Answers (1)

Heiyoo
Heiyoo

Reputation: 101

Finally figured out the solution ...

Adding v-if="pdata && pdata.length" can trigger the animation after props data receviced.

Upvotes: 4

Related Questions