Home » vue » vue.js 3 / Change VueApexCharts Legend based on REST API call

vue.js 3 / Change VueApexCharts Legend based on REST API call

Posted by: admin November 26, 2021 Leave a comment

Questions:

there is a REST API which returns an array of names and amounts(example see below). I’ve created a vue3.js component which queries the API and visualise the data using VueApexCharts donut chart. This works. However, what do I need to change in order to add the names returned from API call to the chart legend? I don’t have access to the chartOptions which is defined the data()-section.

[
    {
        "Name": "Somename",
        "Amount": 100,
    },
       {
        "Name": "Othername",
        "Amount": 100,
    }
]

Code vue3.js component

< script lang = "ts" >

  import {
    defineComponent
  } from 'vue'
import {
  onMounted,
  ref
} from 'vue'
import axios from 'axios'
import VueApexCharts from "vue3-apexcharts";


export default defineComponent({

    components: {
      apexchart: VueApexCharts,
    },

    data() {
      return {
        // series: [10, 20, 30],
        chartOptions: {
          chart: {
            width: 380,
            type: 'donut',
          },
          plotOptions: {
            pie: {
              startAngle: -90,
              endAngle: 270
            }
          },
          dataLabels: {
            enabled: false
          },
          fill: {
            type: 'gradient',
          },
          legend: {
            formatter: function(val, opts) {
              return val + " - " + opts.w.globals.series[opts.seriesIndex]
            }
          },
          title: {
            text: 'Gradient Donut with custom Start-angle'
          },
          responsive: [{
            breakpoint: 480,
            options: {
              chart: {
                width: 200
              },
              legend: {
                position: 'bottom'
              }
            }
          }]
        }
      }
    },

    name: 'HelloWorld',
    props: {
      msg: String,
    },

    setup() {
      const series = ref([0]);

      onMounted(async() => {
        const res = await axios.get("http://127.0.0.1:5000/backend");

        res['data'].forEach(function(value) {
          series.value.push(value['ValueInEUR'])
        });
      });

      return {
        series
      };
    },

  }) <
  /script>
<template>
    <div id="chart">
        <apexchart type="donut" width="380" :options="chartOptions" :series="series"></apexchart>
    </div>
</template>

Answers:

I think you just need to move chartOptions to setup and assign label to chartOptions.

Here is the codesandbox:

https://codesandbox.io/s/sleepy-flower-772qz?file=/src/components/HelloWorld.vue

setup() {
    const chartOptions = ref({
      chart: { ... },
      plotOptions: { ... },
      dataLabels: { ... },
      fill: { ... },
      legend: { ... },
      title: { ... },
      labels: [],  // add a empty labels to be ready for assignment
      responsive: [ ... ],
    });

    onMounted(async () => {
      const res = await axios.get("http://127.0.0.1:5000/backend");

      res["data"].forEach(function(value) {
        series.value.push(value["ValueInEUR"]);

        // construct and assign label here
        chartOptions.value.labels.push(value["Name"] as never);
      });
    });

    return {
      series,
      chartOptions, // return chartOptions
    };
}

donut with legend