Apexcharts <svg> attribute height: Expected length, "NaN" when loading different page in single page app

[dre99gsx]

I have a simple chart generated with ApexCharts v3.45.1. This is on a single page application where when I fetch another page via an AJAX call, the original chart in the DOM is removed on purpose (using knockout's data-bind if statement).

In the stacktrace, it seems the apexchart's redrawOnParentResize is being triggered, and when it finds the node is no longer there, it has a height of "NaN" under:

key: "setAttrs"
value: function(t,e) -> t.setAttribute(i, e[i])

It's trying to redraw a chart which no longer exists before I even had the time to destroy it.

Spent some time trying to find a resolution. I can set redrawOnParentResize and WindowResize both to false. This fixes the issue, but the chart will not resize dynamically.

I did implement a solution which seems to work by initiating a ResizeObserver BEFORE the chart is rendered. The purpose here is to destroy the chart if it becomes hidden/removed from the DOM.

 self.chart = new ApexCharts(element, options);

    setTimeout(function () {
    
    new ResizeObserver(function (ele) {
        var height = ele[0].contentRect.height;
        if (height == 0) self.Destroy();
    }).observe(element);

    self.chart.render();
   }, 200);

This doesn't always work and depends on how quick I move to another page before the event gets triggered.

Is this a bug in Apexcharts or is there a better way of handling this?

[iamsid]

Encountered this last week. Not sure why there hasn't been any activity or a fix for this in past 6 months.

[TheKvikk]

Started happening to me after latest Firefox and Safari update. Happens for the first time browser loads a page with apexchart, subsequent refreshes won't trigger this bug.