Problem with Apex charts and data via api.

[dirkhd]

Hey guys,

I use Apex charts (www.apexcharts.com) for a web application. In addition, I retrieve data via Axios after the page has loaded and update for the apex chart.

Basically, that works but when I now resize the browser window, the former data that I used as dummy data are restored.
I can’t figure out where exactly the problem is so I hope for some help here.

Apex is provided as a component:

import VueApexCharts from 'vue-apexcharts'

// leave the export, even if you don't use it
export default async ({ Vue }) => {

    Vue.component('apexchart', VueApexCharts)

}

Within the vue page the chart is called so:

<apexchart type="pie" :series="series" :options="chartOptions" />

Dummy data for series are defined and options are provided. The hook mounted starts api request and adapt the data.
It works but as I mentioned before when resizing the window dummy data are restored.

<script>
export default {
  data() {
    return {
      projectAnalysis: {},
      series: [100, 400],
      chartOptions: {
        chart: {
          id: "samplesGender",
          fontFamily: "Raleway"
        },
        responsive: [
          {
            breakpoint: 480,
            options: {
              chart: {
                width: 250
              },
              legend: {
                position: "bottom"
              }
            }
          }
        ],
      }
    };
  },
methods: {
    getProjectAnalysis() {
      this.$axios
        .post("../db/api.php", {
          request: "getProjectAnalysis",
        })
        .then(response => {
          if (response.data["isSuccess"] == false) {
            this.$router.push("/Second/Login");
          }
          if (response.data["isSuccess"] == true) {
            this.projectAnalysis = response.data["projectAnalysis"];

            this.series = [
              parseInt(this.projectAnalysis.sampleMale),
              parseInt(this.projectAnalysis.sampleFemale)
            ];

/*Following I tried as an alternative but that does not work at all. */
            /*ApexCharts.exec(
              "samplesGender",
              "updateSeries",
              [
                {
                  data: [
                    parseInt(this.projectAnalysis.sampleMale),
                    parseInt(this.projectAnalysis.sampleFemale)
                  ]
                }
              ],
              true
            );*/
            //alert(response.data["message"]);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    }
  },
  mounted() {
    this.getProjectAnalysis();
  }
};
</script>

[dobbel]

@dirkhd

maybe you can find a solution here:

https://github.com/patrickmonteiro/quasar-apexcharts

[dirkhd]

@dobbel Thank you for your hint. Unfortunately, this example does not use dynamic data. So I get no ideas what to try in a different way.

[dobbel]

@dirkhd

Try to debug it with the vue dev tools for chrome. If possible create a codepen.io so people here can help you better.

Btw setting dummy data should not be necessary.

[dirkhd]

Okay, after I have trief a lot of more combination I got the problem “fixed”. Or at least a solution that works.

Wanted to share this here in case other users facing the same issues.

Just use a “ref” attribute for the apexchart element and then refer to this for updating in the following way:

<apexchart
              ref="sampleGender"
              type="pie"
              :series="series"
              :options="chartOptions"
            />

So I use as ref “sampleGender”.

Than after api call via Axios I update the data series as follows:

this.$refs.sampleGender.updateOptions({
              series: [
                parseInt(this.projectAnalysis.sampleMale),
                parseInt(this.projectAnalysis.sampleFemale)
              ]
            });