Apexchats.js axios gives me undefined with Vue

Question

I am trying to get data from server using vue and apexcharts, but even after I called data with axios, it gives me undefined..

What have I missed?

template

<apexchart
  ref="chart1"
  width="100%"
  :options="chartOptions" :series="series">
</apexchart>

data from url

{
    "pageviews": 1313,
    "new_users": 1014
}

script

export default {
    data: function () {
        return {
            series: [],
            chartOptions: {
             chart: {
               type: 'donut',
             }, 
            colors: ['#01cd49', '#007568'],
            labels: ['new', 're'],
            
        }
    },
    created: function () {
        this.getByVisitor()
    },
    methods: {
     getByVisitor() {
      const url = 'url';
      axios
        .get(url)
        .then(response => {
          this.$refs.chart1.updateSeries([{
            name: 'Sales',
            data: response.data
          }])
        })
        .catch(error => (this.byVisitor = error.data));
        console.log(`---------------this.$refs.chart1`, this.$refs.chart1);
    },
}

You don't appear to have a `series` data property which you're attempting to use in `:series="series"` — Phil, Jun 23 '21 at 03:30
@Phil I coded it, but did not write here when I was writing, but even with it, it gives me `undefined` — Uhney, Jun 23 '21 at 03:31
I don't know, what do the `apexchart` docs say? Also, refs won't be populated until the `mounted` hook has completed so trying to access `this.$refs.chart1` might not work if being called from within `created` (depending on how fast the request resolves) — Phil, Jun 23 '21 at 03:33
I suggest you read the [docs on how to update data](https://apexcharts.com/docs/vue-charts/#updating-series). You should only need to populate `series` rather than trying to call methods on the chart component. If you do that, you can keep using the `created` hook — Phil, Jun 23 '21 at 03:36
@Phil Oh, this one: https://stackoverflow.com/questions/61474411/apexchart-does-not-update-dynamically-using-axios And yes, I have read that docs, but that does not apply to my situation as I want to use `axios` — Uhney, Jun 23 '21 at 04:35
You can still use Axios, you just need to update your `series` array instead of calling `updateSeries()` on the component — Phil, Jun 23 '21 at 04:55
@Phil Mmmkay.. so I really have no idea how to insert data in `series`.. — Uhney, Jun 23 '21 at 05:07

score 0 · Answer 1 · answered Jun 23 '21 at 05:37

See Updating Vue Chart Data

There's no need to directly call the updateSeries() method on the chart component since it is able to react to changes in series. All you have to do is update your series data property

export default {
  data: () => ({
    series: [], //  start with an empty array here
    byVisitor: null, //  you seem to have missed this one for your error data
    chartOptions: {
      chart: {
        type: 'donut',
      },
      colors: ['#01cd49', '#007568'],
      labels: ['new', 're'],
    }
  }),
  created: function() {
    this.getByVisitor()
  },
  methods: {
    async getByVisitor() {
      const url = 'url';
      try {
        const { data } = await axios.get(url)
    
        // now update "series"
        this.series = [{
          name: "Sales",
          data
        }]
      } catch (error) {
        this.byVisitor = error.data
      }
    },
  }
}

Apexchats.js axios gives me undefined with Vue

1 Answers1