vue-apexcharts
vue-apexcharts copied to clipboard
apexcharts
Error when component destroy in same time chart are build
I have these javascript errors :
1 =>Error: <path> attribute d: Expected number, "M NaN NaN A 132.5 …".
1 =>Error: <path> attribute d: Expected number, "M NaN NaN A 112.5 …".
1 =>Error: <path> attribute d: Expected number, "M NaN NaN A 92.5 9…".
...
2 =>Error: <g> attribute transform: Expected number, "translate(NaN, 20)".(2)
1 => if (a == 'leading') {
// ... call the leading method instead
if (this.leading) {
this.leading(v);
}
} else {
// set given attribute on node
bug here ===> typeof n === 'string' ? this.node.setAttributeNS(n, a, v.toString()) : this.node.setAttribute(a, v.toString());
} // rebuild if required
2 => key: "setAttrs",
value: function setAttrs(el, attrs) {
for (var key in attrs) {
if (attrs.hasOwnProperty(key)) {
bug here ===> el.setAttribute(key, attrs[key]);
}
}
}
When the chart creating and i leave route (parent component are destroy). My code :
<apexchart v-if="!ui.block" type="radialBar" :options="radial.options" :series="radial.series" :key="1"/>
When axios get data and radial.options and radial.series are populate ui.block = false and chart begin construct. If i leave page at these time. Bug appear.
Can you help please ?
I'm having the same issue.
To replicate is easy. Just create 2 components and use keep-alive, when you switch from one to another with keep alive:
Error:
will appear.
It seems there is a problem on the destroy.
Any updates on this? I'm having the same problem. I'm using nuxt keep-alive with two pages; on both pages I have apexchart donut. Everything works ok, but error is thrown every time I change the page.
I dig it up more today and I saw that it happens only when I've opposite: true (doesnt make much sense but it is what it is) maybe it can help.
I've trimm down to having only this code:
yaxis= [ { seriesName: trans('_v4.models.app_tracking.general.stats.graph.qty_clicks'), }, { seriesName: trans('_v4.models.app_tracking.general.stats.graph.qty_clicks'), show: false, }, { seriesName: trans('_v4.models.app_tracking.general.stats.graph.qty_clicks'), show: false, }, { seriesName: trans('_v4.models.app_tracking.general.stats.graph.qty_clicks'), show: false, }, { seriesName: trans('_v4.models.app_tracking.general.stats.graph.conversion_rate'), opposite: true, } ];
Just when removing the opposite: true, the error stop appearing.
Any updates? I started encountering this after apexcharts was bumped thanks to that security dep update
Still no updates? I also have this problem even not using Nuxt.
I think this repo is dead, I suggest switching over to chart.js, there's a useful chartjs vue package that'll make your life easier than using this package.
@FM1337 Yes, I am consider chart.js too. Have you tried it? No having the same problem like this one? I have done the data structure for apexchart, if switching will need to construct the data again, which is a pain progress barbecue it is rather a very complicated data.
@FM1337 Yes, I am consider chart.js too. Have you tried it? No having the same problem like this one? I have done the data structure for apexchart, if switching will need to construct the data again, which is a pain progress barbecue it is rather a very complicated data.
Yup I switched over to it (specifically vue-chartjs) and have had no issues like the ones I've encountered with vue-apexcharts. I only originally used apex because I couldn't remember the name of chart.js and apex was the first result when looking for javascript chart libraries.
Switching library for a simple warning on the console? It doesn't cause any real problem. I suffer the same problem but I know this is not a priority since it's a minor issue for the sake of our Dev minds lol
Switching library for a simple warning on the console? It doesn't cause any real problem. I suffer the same problem but I know this is not a priority since it's a minor issue for the sake of our Dev minds lol
Nope. It does caused problem in my case. The chart (donut chart) collapsed when switching tabs.
I have this same problem when trying to populate series data from an axios response. Will go back to chartjs until I can figure it out.
hi guys, I have problem when using apexchart on different material tab, when i try to resize the browser on different tab (not the tab displaying the chart) , it will hit Error:
Not really fixing the original issue but at least getting rid of the errors. In my use case I only have charts on a few pages on my site and decided to turn off the keep-alive feature with a vuex state property whenever i use apexcharts.
<Nuxt :keep-alive="!hasChart" />
Any updates on this? Seems like a lot of people are having the same issue.
I found a workaround. In the template I've added condition v-if (surrounding my apexchart) and then I wrote two additional hooks: activated - sets component as active and deactevated - set component as inactive. Thanks to this, my chart is still keep-alive and I do not see annoying errors in console. Pseudocode:
<template>
<div v-if="componentIsActive">
<apexchart :options="chartOpts" :series="chartSeries"></apexchart>
</div>
</template>
data() {
return {
componentIsActive: false,
}
},
activated() {
this.componentIsActive = true
},
deactivated() {
this.componentIsActive = false
},
@AniaKru95 it does look like a legit workaround but it will re-render the graph upon activation which is what you're trying to avoid by having it wrapped in keep-alive in the first place.
Sure, but I keep my chart's data in memory so it is not a big problem to draw chart again. Spamming errors/warnings in the console was worse. I hope that this issue will be fixed in proper way.
@AniaKru95 Thank you for the workaround, works like a charm as long as you hold your data in parent component or store! I added this.componentIsActive = true; to my mounted() hook aswell since activated() is not running on initial render.
I'm having the same issue. when i switch from one to another tab will appear. this error
apexcharts.common.js:1283 Error:
