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

[heiyoo]

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.

Is it related with issue #75? I'm using version 1.6.0

[HerrLevin]

I have the same issue.

Did you find any workaround to get the animation working again?

[VijeshDatt]

I found a workaround for this by using this.$refs.chart.updateOptions({...}, true, true, true);. The first 'true' after the options object is for redrawPaths, the second 'true' is for animate and the third 'true' is for updateSyncedCharts. I found that this animates the chart when using it as a custom component, however if you are going to be updating the chart live, it will keep redrawing the chart from scratch rather than just updating the chart.

Docs found here: https://apexcharts.com/docs/methods/#updateOptions

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.