Error: <path> attribute d: Expected number, "M NaN NaN A NaN Na…"

[prajwolonta]

I have this vue component where apexchart is being loaded. Inside the component the charts are switchable. Every time i switch from bar chart to pie or pie to bar chart I get this issue:

but switching from bar chart to line chart doesn't throw any errors. I think its a bug in the system.
This is how I've been switching the chart types:

[netzpixel]

I have a very similar error but without switching chart types. I just switch between vue router pages and get this error:

6000 Error: <path> attribute d: Expected number, "M 0 NaN".

[exitlol]

Similar but with angular
Error: <path> attribute d: Expected number, "…878048784 0 0 1 NaN NaN" It's displaying when I navigate to a route that contains charts (mainly a dashboard type page)

[ilkou]

Similar but with react

[discry]

I am encountering this same error with p5js and p5.js-svg@1.0.7 trying to create a golden ratio spiral

[pvh-archifact]

I have this error on resizing the window/viewport in certain situations. Mostly when switching to a new dynamically loaded graph. seems like the previous chart in apex not destroyed resulting in non existing graph, Apex should check on resize if a chart object still exists and if not remove the chart from the cached collection.

I made a demonstration in the following jsbin

[github-actions]

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.

[sylveryte]

I'm also facing the same issue in angular.

[SpartanTech]

same issue, how has everyone solved this?

[pvh-archifact]

Created a new test page on jsbin.
Check browser console for the errors.

The ApexCharts engine is missing checks for removed charts or charts that does not exists anymore on the page.
Being by a removed parent container, chart element or change of content where chart(s) are inside.

I also added the 'correct' method of removing charts on the page. But this is an ideal world situation which is not always possible.

[alboom25]

Also experiencing the same. Unfortunately, no substantial help can be found anywhere.

[alokVishu]

Does anyone resolve this issue?

[pvh-archifact]

I tried to clean up the left over chart on window.onbeforeunload but its not always working. Especially if you have multiple charts on the page or load charts dynamically inside the page and replace them on the fly or empty the chart(s) container. With multiple charts on the page i cache the container id's in a global var and go over them in obeforeunload and look if there is a chart attached to it and remove it. Again this is not always working.

See "destroy chart via method" in my previous example

The real fix would be that in the Apex code actually checks if the chart is still (visible) in the dom before going over resizing/updating etc. on a no longer existing chart.

[klucass]

@pvh-archifact thank you so much! It worked here with Vue3.

I created an array like let chartCollection = []; and then chartCollection.push(chart); inside my function

function renderChart() { 
  let options = {...}
  (...)
  
  let chart = new ApexCharts(document.querySelector("#chart"), options);
  chartCollection.push(chart);
  chart.render(); 

  (...)
}

and then inside the hook function onUnmounted, call destroy() using the collection.

onUnmounted(() => { chartCollection[0] ? chartCollection[0].destroy() : ""; });

and it's working like a charm.

[ArmantoArisRoutsis]

I had a similar issue with React. I was defining the height and width of the chart as 100%. Changing it to px fixed the error in my case.

[Faiizii]

@klucass your example perfectly working on initial render. when i try to update the series I am facing the similar error. I tried updateSeries and ApexChart.exec and no success.

[sujonifty]

I'm also facing this problem in react.

[ktomasic-margins]

In my case, this issue occurred when any of the values passed to the series were NaN.

[theibd56]