apexcharts / vue3-apexcharts

📊 Vue-3 component for ApexCharts
MIT License
314 stars 35 forks source link

Error: <path> attribute d: Expected moveto path command ('M' or 'm'), "null" #58

Closed SeanParkTiz closed 3 months ago

SeanParkTiz commented 1 year ago

Hi guys!

I am using apexchart with Vue3-apexcharts/ Vue 3 / Typescript. If a particular series is selected console thrown error when updating chart.

Does anyone know a solution?

image

<template>
<apexchart type="donut" width="50%" align="center" :options="options" :series="series"></apexchart>
</template>
<script lang="ts" setup>
import { mainStore} from "@/store/";
import { storeToRefs } from "pinia";
import { ref, Ref, reactive, watchEffect } from "vue";
const store = mainStore()
const { responseModel } = storeToRefs(store);

const data: dataInterface= reactive({ success: 0, fail: 0 })
const series: Ref<Array<number>> = ref([])
const options = {
    legend: {
        show: true,
        position: 'top',
        fontSize: '16px',
        labels: {
            colors: ["#fff"]
        }
    },
    labels: ['Success', 'Fail'],
    chart: {
        dataLabels: {
            enabled: false,
        },
        responsive: [{
            breakpoint: 480,
            options: {
                chart: {
                    width: 200
                },
                legend: {
                    show: false
                }
            }
        }],
        legend: {
            position: 'right',
            offsetY: 0,
            height: 230,
        },
        tooltip: {
            enabled: true
        }
    },

}

watchEffect(() => {
    if (responseModel.value !== undefined) {
        if (responseModel.value.isSuccess== true) {
            data.success+= 1
        } else if (responseModel.value.isSuccess== false) {
            data.fail += 1
        }
    }
    series.value = [data.success, data.fail]
})
</script>
github-actions[bot] commented 3 months ago

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.