javascript - Can't update Apexcharts components value

Question

I am using Apexchart library in Vue.js to plot the data on scatterplots. I can POST my data using Axios. I can see the data coming to the browser by doing console.log() to view the data I receive. By using the updateChart() function, which is the Apexcharts property, I do the necessary operations on the incoming data. I cannot send the data to the data array. You can find the reference sample of Apexcharts here.

Chart.vue

<template>
  <div class="grid ml">
    <div id="main">
      <h1 class="header ml">SEARCH VOLUME</h1>
      <apexcharts
        id="chart"
        height="300"
        type="bar"
        :options="chartOptions"
        :series="series"
      ></apexcharts>
      <button @click="updateChart">Update!</button>
    </div>
  </div>
</template>

<script>
import VueApexCharts from "vue-apexcharts";
import axios from "axios";

export default {
  data: function() {
    return {
      chartOptions: {
        chart: {
          id: "vuechart-example",
        },
        colors: ["#9999CC"],
        dataLabels: {
          enabled: false,
          style: {
            colors: ["#9999CC"],
          },
        },
        noData: {
          text: "Loading...",
        },
        title: {
          text: "lorem ipsum dolar sit amet",
          align: "left",
          margin: 10,
          offsetX: 0,
          offsetY: 0,
          floating: false,
          style: {
            fontSize: "14px",
            fontWeight: "regular",
            fontFamily: "Barlow, sans-serif",
            color: "#6B6B99",
          },
        },
        xaxis: {
          labels: {
            style: {
              colors: "#6B6B99",
              fontSize: "12px",
              fontFamily: "Barlow, sans-serif",
              fontWeight: 400,
              cssClass: "apexcharts-xaxis-label",
            },
          },
          categories: [
            "JAN",
            "FEB",
            "MAR",
            "APR",
            "MAY",
            "JUN",
            "JUL",
            "AUG",
            "SEP",
            "OCT",
            "NOV",
            "DEC",
          ],
        },
        yaxis: {
          labels: {
            style: {
              colors: "#6B6B99",
              fontSize: "12px",
              fontFamily: "Barlow, sans-serif",
              fontWeight: 400,
              cssClass: "apexcharts-xaxis-label",
            },
          },
        },
      },
      series: [
        {
          name: "Company",
          data: [1,2,3,4],
        },
      ],
    };
  },
  methods: {
    updateChart() {
      axios
        .post("http://APIURL", {
          country: "tr",
          lang: "tr",
          keyword: "ankara",
        })
        .then(({ data }) => {
          this.series = [
            {
              data: data,
            },
          ];

          // this.series = data;
          console.log("DATAAA", data);
        })
        .catch((e) => console.log(e));
    },
  },
  components: {
    apexcharts: VueApexCharts,
  },
  beforeMount() {},
};
</script>

<style lang="scss">
#chart {
  display: flex;
  justify-content: center;
  max-width: 760px;
  padding-left: 8px;
}

.ml {
  font-size: 24px;
}

#main {
  width: 1142px;
  height: 566px;
}
</style>

Browser console screen enter image description here

The part where I can't send the data to the array

series: [
        {
          name: "Company",
          data: [1,2,3,4],
        },
      ],

question from:https://stackoverflow.com/questions/65920584/cant-update-apexcharts-components-value

Answer 1

In the doc examples, the data is an array of values, but your api is returning an array of objects. Try changing your updateChart method to use only values by mapping the api array to just its volume values:

.then(({ data }) => {
  this.series = [
    {
      data: data.map(o => o.volume),
    },
  ];
})